0

Tengo una mini problema, tengo una lista de checkboxpero se descuadra, tengo el siguiente código con la directiva <ion-checkbox>

   <ion-item class="item-button-right" ng-repeat="item in unitPhysicalStateList" >
        {{item.unitPartName}}
       <div class="buttons">
          <ion-checkbox ng-model="item.good"
             ng-checked="item.good" ng-disabled="item.bad">B</ion-checkbox>
          <ion-checkbox  ng-model="item.bad"
                    ng-checked="item.bad" ng-disabled="item.good">M</ion-checkbox>
       </div>
   </ion-item>

CSS:

.buttons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  position: absolute;
  top: 8px;
  right: 16px;
  min-width: 34px;
  min-height: 34px;
  font-size: 18px;
  line-height: 32px; }

Pero en el vista se descruada: introducir la descripción de la imagen aquí

En mi lista de checkbox, salen las lineas que son de una lista, alguien sabe como poder quitar la linea o poder mejorar la directiva???.

Muchas gracias

1 respuesta 1

2

Espero estar entendiendo bien tu pregunta. Las líneas que se muestran es probable que sean los bordes del div, puedes tratar añadiendo un estilo adicional a la clase del botón con:

border:none;

De ese modo puedes quitar todos los bordes de todos los lados, arriba, abajo, derecha e izquierda así no aparecerán las líneas adicionales que te están molestando.

Solo me causa duda por qué salen en los check de la M y no de la B, pero puedes intentar poner este estilo a ver si cambia como se muestra.

EDICIÓN

He creado un pequeño CodePen para ilustrar tu situación. En este caso el borde de las líneas que vez hace parte de la clase "item-checkbox" del Label que se autogenera con el directive ion-checkbox.

En resumen, al usar un ion-checkbox se autogenera un label que puedes ver al "Inspeccionar elemento" en el explorador.

Solución: Agregar un estilo que sobreescriba el comportamiento de la clase item-checkbox que incluya el estilo de border:none De ese modo puedes modificar el estilo de los elementos autogenerados.

Te dejo el link del CodePen para que veas que funciona. El truco esta en el CSS.

2
  • 1
    Hola TppShaka77, me ha ayudado tu solución, es correcto lo que mencionas que la lineas la genera la clase del item-checkbox de ionic.css. por eso me causaba ruido, el por que en la letra B, no salía esa linea. pero bueno. Gracias por la ayuda y saludos!
    – Dann
    Commented el 5 jun. 2018 a las 22:23
  • Con todo el gusto del mundo Dann. Me alegra que funcionara :)
    – TppShaka77
    Commented el 5 jun. 2018 a las 22:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.