En este post te mostraré algo sencillo: cómo hacer que un input o textarea en un formulario (usando el framework Bulma CSS o Buefy) ocupe todo el ancho disponible, es decir, que esté expandido.

Usando Bulma

La clase que se necesita es: is-expanded y debe tenerla el padre del input o textarea. Por ejemplo:

Fíjate que el párrafo, además de tener la clase control tiene la clase is-expanded. Eso hará que el input ocupe todo el ancho disponible.

Usando Buefy

Si usas el framework Buefy entonces puedes usar la directiva expanded dentro del b-field por ejemplo:

Fíjate que se usa expanded en el b-field. Nota: ya sé que en lugar del input podría usar b-input.

Diferencia

Ahora veamos la diferencia de cómo se ve un input que no usa el 100 % del ancho disponible contra uno que sí lo hace.

Normalmente se ve así:

Input sin ocupar todo el ancho

Pero al poner el input expandido usando los estilos CSS de Bulma se ve así:

Ocupar todo el ancho con input usando Bulma CSS


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 750 suscriptores

Relacionado:  Validación de formularios en Flutter


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: