select2 - Setting different width to input and dropdown

Solution 1:

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:

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:

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

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