web-dev-qa-db-ja.com

select2-入力とドロップダウンに異なる幅を設定

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/

助けてくれてありがとう。

jquerycssselectjquery-select2
44
naviram

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

jsFiddle のデモです。

JavaScript：

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

[〜＃〜] css [〜＃〜]：

.bigdrop {
    width: 600px !important;
}

より新しいバージョンではより良い解決策があることに注意してください！ Dave Amphlett's answerを参照してください

58
Yeronimo

Select2には、ドロップダウンのコンテンツに対して十分な幅を確保するためにJavaScriptを使用する「dropdownAutoWidth」パラメーターが含まれています。

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

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

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

これを試して。これにより、コンテナの幅が100％に設定されます

10
Asheeka K P

さらに優れたソリューション。つかいます：

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

Select2が開いているときにのみselect2を広くする方法は次のとおりです。

右側に拡張する場合は、次のCSSを追加します。

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

左に展開する場合は、この{

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

私はこれを使用し、完璧に機能しましたが、それはすべてのselect2

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