select2 - Setting different width to input and dropdown

Jquery Problem Overview

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.

Jquery Solutions

Solution 1 - Jquery

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.

Solution 2 - Jquery

The property you used is not for controlling the dropdown width. You can use the dropdownCssClass property.

Here's a demo in jsFiddle.

JavaScript:

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});

CSS:

.bigdrop {
    width: 600px !important;
}

Please note that for more recent versions there is now a better solution! See Dave Amphlett's answer

Solution 3 - Jquery

$("#e1").select2({ width: '100%' });

Try this. This will set the width of container to 100%

Solution 4 - Jquery

Even better solution. Use:

$('#e1').select2({width: 'resolve'});

Solution 5 - Jquery

Try this.

$(".js-example-basic-single").select2({dropdownAutoWidth : true});

Solution 6 - Jquery

Try this.

<select id="e1" data-width="100%">

Solution 7 - Jquery

Here's how to make select2 wider only when its open:

If you want it to expand towards the right side, add this css:

  .select2-container.select2-dropdown-open {
    width: 170%;
  }

if you want it to expand left, add this {

  .select2-container.select2-dropdown-open {
    width: 170%;
    margin-left: -70%;
  }

Solution 8 - Jquery

I used this and it worked perfect, only that it will affect all the select2

#select2-drop{
    width: 400px !important;
}

Solution 9 - Jquery

This worked for me..

 .select2-container--krajee .select2-dropdown--below{
    width:230px !important;
    margin-left: -70px !important;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	naviram	View Question on Stackoverflow
Solution 1 - Jquery	Dave Amphlett	View Answer on Stackoverflow
Solution 2 - Jquery	Yeronimo	View Answer on Stackoverflow
Solution 3 - Jquery	Asheeka K P	View Answer on Stackoverflow
Solution 4 - Jquery	Ron D.	View Answer on Stackoverflow
Solution 5 - Jquery	Sumit Adak	View Answer on Stackoverflow
Solution 6 - Jquery	Dipesh Dwivedi	View Answer on Stackoverflow
Solution 7 - Jquery	Yossi Shasho	View Answer on Stackoverflow
Solution 8 - Jquery	kimoduor	View Answer on Stackoverflow
Solution 9 - Jquery	vikas	View Answer on Stackoverflow