Can the chosen jQuery combobox have different widths based on whether it's open?
Yes that is possible. This can done in 2 ways:
- Directly adding style "width" to the class
chzn-drop
in chosen.css file. - Adding width via jQuery.
I prefer 2nd one and here is the code:
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"});
Result:
Hope you understood.
The approved answer is correct, however: you can also set it up so that the dropdown takes the width it needs to host its content instead of a fixed value. I also made it so that will not be smaller than the select box itself.
$('.chosen-drop').css({minWidth: '100%', width: 'auto'});
You can set width property with initializer chosen.
$(".chosen-select").chosen({ allow_single_deselect: true, disable_search_threshold: 5, width:"100%" });