Search code examples
jquery-chosen

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

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?

Solution

  • 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.