select2 - Ustawianie różnej szerokości do wprowadzania i rozwijania

Question

Używam Select2 3.3.2

Mam bardzo bardzo długie opcje w wyborze. przykład:

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

Celem jest uniknięcie owijanie opcji gdy rozwijana otworzy.

Chciałbym ustawić długą szerokość rozwijanego menu po otwarciu (na przykład - 800px, a nawet automatycznie ocenianą szerokość).

Aby zachować dane wejściowe o małej szerokości, gdy menu rozwijane jest zamknięte (na przykład 300 pikseli).

Poszłam za tym numerem "Add option to set dropdown width" select2.

Ale nie mogłem go uruchomić, szerokość opcji/rozwijania jest taka sama jak szerokość wejściowa i opcje jako zawijane do wielu linii.

Oto demo z moim problemem w jsfiddle - http://jsfiddle.net/ewwAX/

Dziękuję wszystkim z góry za pomoc.

Answer 1

Używana właściwość nie służy do kontrolowania szerokości rozwijanej. Możesz użyć właściwości dropdownCssClass.

Here's a demo in jsFiddle.

JavaScript:

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

CSS:

.bigdrop { 
    width: 600px !important; 
} 

Answer 2

Wybór2 zawiera parametr 'dropdownAutoWidth' która wykorzystuje JavaScript próbować być na tyle szeroki, za treść rozwijanej.

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

To przynajmniej działa z Select2 3.4.3 - Nie wiem ile wcześniej zostało wprowadzone.

Answer 3

Oto jak zrobić select2 szersza tylko wtedy, gdy jego otwarty:

Jeśli chcesz go rozwijać prawą stronę, dodaj CSS:

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

jeśli chcesz, aby rozwinąć w lewo, dodać ten {

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

Answer 4

użyłem tego i to działało idealnie, tylko, że to wpłynie na cały select2

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

Answer 5

Jeszcze lepsze rozwiązanie.Zastosowanie:

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