select2 - 入力とドロップダウンの幅を変更する

Question

私はSelect2を使用しています3.3.2

私は非常に長いオプションを選択しています。 例：

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

目的は、ドロップダウンが開くときのオプションの折り返しを避けるためです。

オープン時にドロップダウンに長い幅を設定したい（たとえば、 - 800px、または自動評価された幅など）。

しかし、ドロップダウンが閉じているときに入力を短く（たとえば300px）維持する。

私はこののselect2の問題に続きました。

しかし、私はそれを動作させることができませんでした。オプションの幅/ドロップダウンは入力の幅と複数の行に囲まれたオプションと同じです。ここで

はjsfiddleでの私の問題のデモです - http://jsfiddle.net/ewwAX/

助けるため、事前にすべてのいただきありがとうございます。

Answer 1

使用したプロパティは、ドロップダウンの幅を制御するためのものではありません。 dropdownCssClassプロパティを使用できます。

Here's a demo in jsFiddle。

JavaScriptの：

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

CSS：

.bigdrop { 
    width: 600px !important; 
} 

Answer 2

Selectセレクトは、ドロップダウンの内容について十分に広いことを試みるためにJavaScriptを使用して 'dropdownAutoWidth' パラメータを含んでいます。

これは少なくともSelect2で動作します。3.4.3 - どのくらい前に導入されたか分かりません。

Answer 3

ここではときにのみ、その開放広いSELECT2を作成する方法は次のとおりです。

あなたはそれが、右側に向けて展開するこのCSSを追加したい場合は：あなたはそれが左を展開したい場合は

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

を追加この{

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

Answer 4

は、私はこれを使用し、それが影響するだけという、完璧に働いたすべてのselect2

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

Answer 5

もっと良い解決策。用途：

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