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

Question

I use chosen in order to make a fun combobox. Everything works fine but I have a question.

I think the option list takes the width given in the visual combobox. All my options are very long and I must make a very large combobox to avoid options going in two lines.

Is it possible to make a little combobox, like 150px, when closed, and a much bigger one when the list is open?

Answer 1

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.

Answer 2

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'});