jquery-chosen - bootstrap - jquery chosen select option

¿Puede el combobox jQuery elegido tener diferentes anchos en función de si está abierto?

Question

Yo uso el elegido para hacer un divertido combobox. Todo funciona bien pero tengo una pregunta.

Creo que la lista de opciones toma el ancho dado en el cuadro de selección visual. Todas mis opciones son muy largas y debo hacer un cuadro combinado muy grande para evitar que las opciones vayan en dos líneas.

¿Es posible hacer un pequeño cuadro combinado, como 150px, cuando está cerrado, y uno mucho más grande cuando la lista está abierta?

Answer 1

La respuesta de Koenpeter de simplemente agregar un "ancho: automático" no me funcionó. Encontré que todo se puede hacer en CSS con lo siguiente:

.chosen-container .chosen-drop {
    min-width: 100%;
    width: auto;
}

.chosen-container .chosen-drop ul {
    white-space: nowrap;
}

Answer 2

Puede establecer la propiedad de ancho con el inicializador elegido.

$(".chosen-select").chosen({ allow_single_deselect: true, disable_search_threshold: 5, width:"100%" });

Answer 3

Sí, eso es posible. Esto se puede hacer de 2 maneras:

1. Agregando directamente el estilo "ancho" a la clase chzn-drop en el archivo elegido .css .
2. Añadiendo ancho a través de jQuery.

Prefiero el segundo y aquí está el código:

HTML:

<select class="chzn-select" data-placeholder="select your options" style="width: 150px">
    <option value="">option1</option>
    <option value="option1">option2</option>
    <option value="option2">option3</option>
</select>

jQuery:

$(''.chzn-select'').chosen();
$(''.chzn-drop'').css({"width": "300px"});

Resultado:

Espero que hayas entendido.

Answer 4

Sin embargo, la respuesta aprobada es correcta: también puede configurarlo para que el menú desplegable tome el ancho que necesita para alojar su contenido en lugar de un valor fijo. También lo hice para que no sea más pequeño que el cuadro de selección en sí.

$(''.chosen-drop'').css({minWidth: ''100%'', width: ''auto''});

Answer 5

$(''.chosen-select'').each(function() {
    var $this = $(this);
    $this.next().css({''width'': ''225px''});
});