Bulma CSS

Bulma CSS: input en todo el ancho

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:

<p class="control is-expanded">
  <input class="input" type="text" placeholder="...y">
</p>

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:

<b-field expanded label="Nombre">
    <input class="input"
           placeholder="Nombre" type="text">
</b-field>

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 aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
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/

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

7 horas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

8 horas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

8 horas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

9 horas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

9 horas hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

22 horas hace

Esta web usa cookies.