Select2 no calcular `resueltos` ancho correctamente si está oculta, seleccione

Usted puede configurar el ancho en la <select> elemento así:

<select style="width:260px">

Hasta encontrar el ancho deseado que usted está buscando. De hecho, los ejemplos en la página oficial de select2 plugin sitio se hace de esta manera.

Sin embargo, si estás decidido a mantenerse alejado de los estilos en línea, siempre se puede simplemente reemplazar select2 de la CSS y de destino el contenedor resultante.

.select2-container {
  width: 260px;
}

Seleccione 2 es lo suficientemente inteligente como para calcular el tamaño si sólo se establece en la etiqueta < select>. como

<select style="width: 100%"></select>

Formato CSS en clases que no iba a funcionar!

Leer más en «Diseño sensible – por Ciento de ancho de«

Lugar de invocar select2() en el Árbitro Tipo cuando se carga la página, invocar select2 después de mostrar Árbitro Tipo por primera vez. De esta manera, la selección estará visible (con un ancho adecuado), y el 'width': 'resolve' opción debería funcionar. Si usted proporciona un pequeño jsfiddle ejemplo sería más fácil señalar esto.

He resuelto mi problema similar con CSS simple:

.select2-container {
    width: 100% !important;
}

Establezca la propiedad de estilo de select elemento con ancho de 100%

<select class="js-example-responsive" style="width: 100%"></select>

Ver Diseño sensible – por Ciento de ancho de

Ejecutar esta al mostrar los controles con Select2 adjunto:

//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();

Mi solución preferida es dejar de select2 de la asignación de esos width y sean automáticas. Comentario a la siguiente en select2.full.js :

Por Envase:

  Select2.prototype._placeContainer = function ($container) {
    $container.insertAfter(this.$element);

      //##!!
      /*
    var width = this._resolveWidth(this.$element, this.options.get('width'));

    if (width != null) {
      $container.css('width', width);
    }*/
  };

Para la Búsqueda en el interior del contenedor:

  Search.prototype.resizeSearch = function () {

    //##!!
    /*
    this.$search.css('width', '25px');

    var width = '';

    if (this.$search.attr('placeholder') !== '') {
      width = this.$selection.find('.select2-selection__rendered').innerWidth();
    } else {
      var minimumWidth = this.$search.val().length + 1;

      width = (minimumWidth * 0.75) + 'em';
    }

    this.$search.css('width', width);
    */
  };

  return Search;
});

hack para hacer que funcione es ejecutar:

$('.filter-modal select').css('width', '100%');
antes de
$('select').select2().

https://github.com/select2/select2/issues/4269

Podría enlazar un evento click para el elemento que se abre elemento oculto y establecer el select2 ancho no. Funcionó para mí, y es bastante simple. He utilizado el evento click de hacerlo, porque con ‘documento’ no estaba trabajando.

$('#click-me').on('click', function(event) { 
   $('.select2').select2({width: '100%'});
 }

Select2 tiene un extraño bug que no se «resuelve» en la forma correcta oculto Select2 elementos. Este no es el lugar width: "resolve" como este ya es el valor predeterminado. En lugar de la solución es mostrar la select2 y los esconden de repente un segundo más tarde la declaración.

$("#div_container_of_select2").show(); //make it visible for a millisecond
$("select[name=referee_type]").select2(); //declare Select2
$("#div_container_of_select2").hide(); //back to darkness

Este se representará correctamente el select2.

Esto funcionó para mí

.select2-container  {
    width: 100% !important;
}

también un ancho fijo

.select2-container  {
    width: 300px !important;
}

.select2-container {
  width: 100% !important;
}

$("span.select2").css("width", "100%");