Select2 no calcula el ancho ‘resuelto’ correctamente si la selección está oculta

4 minutos de lectura

avatar de usuario
Granizo

Estoy usando el arranque de Twitter y el fantástico complemento Select2.

Estos están funcionando muy bien, me di cuenta de que necesitas configurar {width: 'resolve'} al iniciar Select2, de lo contrario, parece desordenado.

Pero tengo un problema con una de mis selecciones, como puede ver en la imagen a continuación, el Referee Type select tiene un ancho incorrecto.

Esto se debe a que este campo está inicialmente oculto y solo se vuelve visible si Árbitro se selecciona en el Grupo campo.

Entonces, ¿cómo puedo arreglar esto?

Entradas

  • ¿Puede proporcionar un jsfiddle de esta manera podemos ver su problema?

    – Ryan Fishman

    14 de enero de 2013 a las 3:43

  • una opción es esperar hasta que se muestre el elemento para inicializar el complemento, otra es no ocultar select pero colóquelo fuera de la pantalla hasta que lo necesite. Demostración ayudaría

    – charlietfl

    14 de enero de 2013 a las 3:50

  • He estado usando select2 por un tiempo y generalmente configuro el ancho en línea en el estilo del elemento en el HTML. Sé que no es una buena práctica, pero Select2 intentará copiar el ancho del estilo del elemento antes de resolver sus dimensiones reales para que vale la pena intentarlo. En ese caso puedes quitar width: 'resolve'.

    – Fabricio Matté

    14 de enero de 2013 a las 4:22

  • intente agregar ancho en línea con “! importante”.

    – Sundran

    22 de enero de 2013 a las 11:33


avatar de usuario
Yevgeni Afanasyev

Select 2 es lo suficientemente inteligente como para volver a calcular su tamaño si solo lo configura en el select etiqueta. Al igual que:

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

¡El formato CSS en las clases no funcionaría!

Leer más en “Diseño receptivo: ancho porcentual

  • Además de decir que esta es la única respuesta correcta, tengo ganas de agregar que el comportamiento es diferente entre Firefox y Chrome por alguna razón. ¡Felicitaciones de todos modos!

    – DomQ

    18 de enero de 2018 a las 13:48

  • De nada. ¿Notaste alguna diferencia entre Firefox y Chrome?

    – Yevgeniy Afanasyev

    22 de febrero de 2018 a las 22:00

  • Esto definitivamente funciona, pero ¿puedo saber qué hace que este problema?

    – Nguyen Tan Dat

    28 de mayo de 2018 a las 10:36

  • Esto funciona para la selección, pero no para el marcador de posición interior. Si hay un marcador de posición largo, se corta

    – Mischa

    2 de diciembre de 2019 a las 10:21

Puede establecer el ancho en el <select> elemento así:

<select style="width:260px">

Hasta que encuentres el ancho deseado que estás buscando. De hecho, los ejemplos en el sitio oficial del complemento select2 se realizan de esta manera.

Sin embargo, si tiene la intención de mantenerse alejado de los estilos en línea, siempre puede simplemente anular el CSS de select2 y apuntar al contenedor resultante.

.select2-container {
  width: 260px;
}

  • Dios mío, esto me estaba volviendo loco, ugh, las cosas más simples siempre se pasan por alto. Gracias por tu respuesta.

    – César Bielich

    3 de junio de 2016 a las 5:36

Resolví mi problema similar con CSS simple:

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

  • Esta es, de lejos, la mejor respuesta. Más fácil de implementar también.

    – danielricecodes

    14/04/2017 a las 15:54

  • Funciona para todos los casos (si el elemento está oculto dentro de un padre oculto y también si el elemento mismo está oculto). No es necesario comprobar ningún caso externo.

    – ni8mr

    15 mayo 2017 a las 10:39

  • Esto interfiere con otros cuadros de selección negativos en mi caso

    -Harry Bosh

    21 de agosto de 2017 a las 2:56

  • en mi caso, esto provoca un desplazamiento vertical porque el lapso no está en el extremo izquierdo del monitor y está tomando el 100% del ancho del , lo que provoca un ancho de desbordamiento:

    – Raika

    26 de mayo a las 8:03

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

avatar de usuario
josefy

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

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

Ver Diseño receptivo: ancho porcentual

avatar de usuario
mechnicov

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

avatar de usuario
BertrandJ

Ejecute esto cuando muestre los controles con Select2 adjunto:

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

¿Ha sido útil esta solución?