Estoy usando Twitter bootstrap y el fantástico Select2 plugin.

Estos son un gran trabajo, me di cuenta de que usted necesita para establecer {width: 'resolve'} al iniciar Select2 de lo contrario se ve desordenado!.

Pero estoy teniendo un problema con uno de mis selecciona, como se puede ver en la imagen de abajo, el Referee Type select tiene una incorrecta ancho.

Esto es causado debido a que este campo está oculto inicialmente, y sólo se hace visible si Árbitro está seleccionado en el Grupo campo.

Así, ¿cómo puedo solucionar este problema?

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

  • Puede usted por favor proporcionar un jsfiddle de esta manera podemos echar un vistazo a su problema?
  • una opción es esperar hasta que el elemento se muestra para inicializar el plugin, otra es no ocultar select pero el lugar es fuera de la pantalla hasta que sea necesario. Demo, sería de ayuda
  • He estado usando select2 por un tiempo y por lo general se establece la anchura en línea en el elemento de estilo en el código HTML – sé que no es una práctica muy bueno pero Select2 intentará copiar el elemento del estilo de ancho antes de la resolución de sus dimensiones reales así que vale la pena un tiro. En el caso de que usted puede eliminar width: 'resolve'.
  • trate de añadir en línea de ancho con «!importante».
InformationsquelleAutor Hailwood | 2013-01-14

13 Comentarios

  1. 17

    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;
    }
    • omg esto me estaba volviendo loco, ugh las cosas más simples son siempre pasado por alto. Gracias por tu respuesta.
    • es esta solución de trabajo responde a la vista?
  2. 16

    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«

    • En adición a decir que esta es la única respuesta correcta, me siento como la adición de que el comportamiento es diferente entre Firefox y Chrome, por alguna razón. Felicitaciones de todos modos!
    • Después de luchar durante años, esta solucionado mi problema 🙂
    • Que son muy bienvenidos. ¿Se nota alguna diferencia entre Firefox y Chrome?
    • Esto sin duda funciona, pero me gustaría saber qué hace que este problema?
  3. 9

    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.

    • ¿Los trucos para ajax render (sin las comillas por ancho). Gracias.
    • ESTA ES LA RESPUESTA CORRECTA! 🙂 Mi Select2 estaba funcionando correctamente hasta que yo no vaya a una ocultos FICHA. Desde ese punto de anchura de Select2 se redujo hasta el valor seleccionado. Esto es sólo un ERROR, la solución es display:block/declarar Select2 /pantalla:ninguna en la página listo.
  4. 9

    He resuelto mi problema similar con CSS simple:

    .select2-container {
        width: 100% !important;
    }
    • Este es por lejos la mejor respuesta. Más fáciles de implementar, también.
    • Funciona para todos los casos (si el elemento está oculto dentro de un primario oculto y también si el elemento está oculto). No hay necesidad de verificación externa de los casos.
    • Esto interfiere con otros cuadros de selección negativley en mi caso
  5. 3

    Ejecutar esta al mostrar los controles con Select2 adjunto:

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

    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;
    });
    • Hay un tema abierto para solucionar este aquí, aunque en la actualidad no hay ninguna revisión o la respuesta de la mantenedor: github.com/select2/select2/issues/4513
    • $(‘select’).select2({ width: ‘auto’ });
  7. 0

    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%'});
     }
  8. 0

    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.

  9. 0

    Esto funcionó para mí

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

    también un ancho fijo

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

Dejar respuesta

Please enter your comment!
Please enter your name here