web-dev-qa-db-ja.com

選択したjQueryコンボボックスは、開いているかどうかに基づいて異なる幅を持つことができますか？

私は楽しいコンボボックスを作るために選ばれたものを使います。すべて正常に動作しますが、質問があります。

オプションリストはビジュアルコンボボックスで指定された幅を取ると思います。オプションはすべて非常に長く、オプションが2行で表示されないようにするには、非常に大きなコンボボックスを作成する必要があります。

閉じたときに150pxのような小さなコンボボックスを作成し、リストを開いたときにはるかに大きなコンボボックスを作成することは可能ですか？

jquery-chosen
24
Hugo

はい、可能です。これには2つの方法があります。

  1. クラスにスタイル"width"を直接追加するchzn-drop in chosen.cssファイル。
  2. JQueryを介して幅を追加します。

私は2番目のものを好み、ここにコードがあります：

HTML：

<select class="chzn-select" data-placeholder="select your options" style="width: 150px">
    <option value="">option1</option>
    <option value="option1">option2</option>
    <option value="option2">option3</option>
</select>

jQuery：

$('.chzn-select').chosen();
$('.chzn-drop').css({"width": "300px"});

結果：

ご理解いただければ幸いです。

29
Praveen

承認された回答は正しいです。ただし、ドロップダウンが固定値ではなくコンテンツをホストするために必要な幅を取るように設定することもできます。また、選択ボックス自体よりも小さくならないようにしました。

$('.chosen-drop').css({minWidth: '100%', width: 'auto'});
10
Koen Peters

初期化子を選択して、widthプロパティを設定できます。

$(".chosen-select").chosen({ allow_single_deselect: true, disable_search_threshold: 5, width:"100%" });
2
srdrylmz

"width：auto"を追加するだけのKoenpeterの答えは、私にはうまくいきませんでした。私はそれがすべてCSSで次のようにしてできることを発見しました：

.chosen-container .chosen-drop {
    min-width: 100%;
    width: auto;
}

.chosen-container .chosen-drop ul {
    white-space: nowrap;
}
1
Andrew Marshall
$('.chosen-select').each(function() {
    var $this = $(this);
    $this.next().css({'width': '225px'});
});
1
Sareesh Krishnan

行を広くしすぎると、小さな画面でいくつかの問題が発生します。画面が十分に大きい場合にのみ、選択したオプションの行を広くするこのカスタムCSSをWebページに追加しました。

@media screen and (min-width: 720px) {
  .chosen-container .chosen-drop {
     border-top: 1px solid #aaa !important;
     width: auto !important;
     white-space: nowrap !important;
     min-width: 100%;
   }
}
0
Fede

元の選択のクラスから幅を継承するには、空の幅で初期化します。

        $(selector).chosen({                
            inherit_select_classes: true,
            width: '',
            /*other options*/
        })
0
Sahib Khan