Portada » JQuery biblioteca de JavaScript » Select2 » Select2 responsiva y cambiar de ancho

Select2 responsiva y cambiar de ancho

Hoy aprenderemos a un Select2 responsiva, mediante CSS y/o jQuery. Esta librería es muy usada para gestionar listas desplegables.

Select2 no es responsiva y el ancho es mayor que el contenedor?

La solución es muy sencilla, tenemos 2 opciones:

  • Usando CSS al 100% en la etiqueta SELECT
  • Al iniciar la librería SELECT2 aplicar width: ‘100%’
Select2 responsiva y cambiar de ancho
Select2 responsiva y cambiar de ancho

Select2 responsiva y cambiar de ancho

A continuación, veremos 3 ejemplos concisos para dar solución al inconveniente.

Primera forma: Usando estilos CSS

Debemos de poner width:100% a la etiqueta <SELECT> haciendo uso de la declaración de estilos en línea. Veamos un ejemplo.


<select style="width: 100%" class="form-control basico" multiple="multiple" 
name="animales[]">
        <option value="Perro">Perro</option>
        <option value="Gato">Gato</option>
        <option value="Loro">Loro</option>
</select>


 <script>
    $(document).ready(function() {
        $('.basico').select2();
    });
</script>

Segunda forma: Usando jQuery al iniciar la librería

Esta forma es más sencilla, solo sería aplicar el ancho al iniciar la librería y la integración seria de la siguiente manera:

<script>
    $(document).ready(function() {
        $('.basico').select2({
            width: '100%'
        });
    });
</script>

Tercera forma: Usando ancho «resolve»

Debe especificar el atributo ancho width: 'resolve' a resolver para preservar el ancho del elemento.

<script>
    $(document).ready(function() {
        $('.basico').select2({
            width: 'resolve'
        });
    });
</script>

Cuarta forma: dropdownAutoWidth

Desde la versión 3.4.0 de Select2 puedes usar este atributo.
  • Incorporaron el atributo dropdownAutoWidth que resuelve el problema y maneja todos los casos impares.
  • Además, tener en cuenta que no está activado de forma predeterminada.
  • Cambia de tamaño dinámicamente a medida que el usuario realiza selecciones.
$(".basico").select2({
   dropdownAutoWidth : true
});

Para finalizar

En este articulo hemos aprendido a cambiar el ancho de nuestras etiquetas select con la librería select2, a través de varios ejemplos completos. Espero que esta breve explicación les ayude en sus proyectos.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad