57

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/

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

4

9 に答える 9

68

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

これは jsFiddle のデモです。

JavaScript :

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

CSS :

.bigdrop {
    width: 600px !important;
}

最近のバージョンでは、より良い解決策があることに注意してください! Dave Amphlett の回答を参照してください

于 2013-05-13T10:28:12.547 に答える
9

さらに良い解決策。使用する：

$('#e1').select2({width: 'resolve'});
于 2015-09-15T09:20:27.380 に答える
3

これを試して。

<select id="e1" data-width="100%">
于 2021-04-06T12:55:46.680 に答える
2

select2 が開いているときだけ幅を広くする方法は次のとおりです。

右側に展開する場合は、次の css を追加します。

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

左に展開したい場合は、これを追加します {

  .select2-container.select2-dropdown-open {
    width: 170%;
    margin-left: -70%;
  }
于 2014-10-29T14:33:59.760 に答える
1

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

#select2-drop{
    width: 400px !important;
}
于 2015-04-29T15:32:15.670 に答える