Can the chosen jQuery combobox have different widths based on whether it's open?

Yes that is possible. This can done in 2 ways:

  1. Directly adding style "width" to the class chzn-drop in chosen.css file.
  2. 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%" });