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

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>

$(".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.