2

Buenas. Estoy Usando Ionic 3.9.2. Me gustaría saber 2 cosas.. Por un lado me gustaría forzar el tamaño de ancho de los botones independientemente de su contenido para que sean todos iguales y que estos ocupen obligatoriamente hasta la mitad de la pantalla (como los primeros 6 botones) para evitar esto:

introducir la descripción de la imagen aquí

Por otro lado me gustaría saber cómo puedo poner que el texto de los botones sea el máximo que permita el tamaño del botón porque cuando visualizo la pantalla en otras resoluciones se desconfigura todo y queda fatal.

Este es el css que estoy utizando:

 .button{
    font-weight: bold;
    width: 100%;
    height: 30px;
    font-size: 12pt; 
    margin-bottom: -10px;

}

Saludos y gracias

1 respuesta 1

0

No necesitas casi nada de CSS para conseguir lo que quieres...

Puedes usar Grid y dividirlo en dos columnas (recuerda mucho al sistema grid de bootstrap).

Y luego puedes usar los atributos que ofrece ionic para los elementos de botones.

El único CSS que he usado es poner el height a una altura mínimo a los button:

Ver ejemplo en Plunkr

.........

<ion-grid>
    <ion-row>
        <ion-col col-6>
            <button ion-button block text-wrap>Primer boton</button>
        </ion-col>
        <ion-col col-6>
            <button ion-button block text-wrap>segundo boton</button>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col col-6>
            <button ion-button block text-wrap>Texto Bastante Largo</button>
        </ion-col>
        <ion-col col-6>
            <button ion-button block text-wrap>Texto Bastante Largo</button>
        </ion-col>
    </ion-row>

      ........

</ion-grid>
1
  • Muchas gracias!! Es lo que buscaba!!!
    – Selzar
    el 16 sep. 2017 a las 23:33

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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