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?
- 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».
Usted puede configurar el ancho en la
<select>
elemento así: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.
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, invocarselect2
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:
Establezca la propiedad de estilo de
select
elemento con ancho de 100%Ver Diseño sensible – por Ciento de ancho de
Ejecutar esta al mostrar los controles con Select2 adjunto:
Mi solución preferida es dejar de
select2
de la asignación de esoswidth
y sean automáticas. Comentario a la siguiente enselect2.full.js
:Por Envase:
Para la Búsqueda en el interior del contenedor:
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.
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.Este se representará correctamente el select2.
Esto funcionó para mí
también un ancho fijo