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.
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.
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
.
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í:
Pero al poner el input expandido usando los estilos CSS de Bulma se ve así:
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.