Select2

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.

Publicaciones relacionadas

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.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

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

Botón volver arriba