select2 - Setting different width to input and dropdown

jquery css select jquery-select2
naviram picture naviram · May 13, 2013 · Viewed 93.2k times · Source

I am using Select2 3.3.2

I have very very long options in the select. Example:

<select id="e1">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="WY">very long long long text</option>
<option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option>
</select>

The purpose is to avoid wrapping of the options when the dropdown opens up.

I would like to set long width for the dropdown when it opens up (for example - 800px, or even automatic evaluated width).

But to keep the input with short width when the dropdown is closed (for example 300px).

I followed this "Add option to set dropdown width" issue of select2.

But I couldn't get it to work, the width of the options/dropdown is the same as the input's width and the options as wrapped to multiple lines.

Here is the demo of my problem in jsfiddle - http://jsfiddle.net/ewwAX/

Thank you all in advance for helping.

Answer

Dave Amphlett picture Dave Amphlett · Oct 11, 2013

Select2 includes 'dropdownAutoWidth' parameter which uses javascript to attempt to be wide enough for the dropdown contents.

$('#whatever').select2({dropdownAutoWidth : true});

This at least works with Select2 3.4.3 - I don't know how much earlier it was introduced.

Related questions

HTML Select tag show vertical scroll with 10 option

I want to make a select box like this with 10 select option, when I try to add more than 15 option it show vertical scroll bar, but not show when it have 10 option. is there any way to achieve this.

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More