Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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.

share|improve this question

1 Answer

up vote 3 down vote accepted

http://jsfiddle.net/ewwAX/1/ The property you used is not for controlling the dropdown width. You can use the dropdownCssClass property. See fiddle.

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});
share|improve this answer
 
Thank you! so simple and work so well! –  user1265306 May 13 at 19:21

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.