web-dev-qa-db-ja.com

複数選択された選択ボックスの高さの設定

複数選択のドロップダウンでChosenを使用していて、選択したボックスの高さを設定サイズに設定したいと思います。

私はoverflow：hiddenのダイアログに選択されたボックスがあり、選択されたボックスはコンテナの完全に外側に配置されています（そのため、選択されたドロップダウンがダイアログから正しくポップアップします）。残念ながら、「position：absolute;」フローから削除され、高さがなくなります...ダイアログが縮小され、複数選択がポップアップして表示されます。親コンテナーを固定の高さに設定できますが、複数のオプションが選択されると複数選択が拡張され、長いリストでも同じ問題が発生します。

選択した複数選択を特定の高さに設定する方法はありますか？ありがとう！

jqueryjquery-chosen
17
Joe the Coder

Nevermind ... CSSを使って自分で考え出した：

.mycontainer {
    height: 120px;
}

.mycontainer .chzn-container-multi .chzn-choices {
    height: 120px !important;
    overflow-y: auto;
}

.mycontainerは、選択したドロップダウンを保持するdivです。

回答の編集は中止してください。この回答は、私が最初に質問したときに2年前に入手できたChosenのバージョンと一致しています。新しいバージョン（1.4.2など）を使用している人は、上記のCSSの "chzn"プレフィックスを "選択"に変更してみてください...スタイリング。）

21
Joe the Coder

これは私にとってトリックでした：

.mycontainer .chosen-choices {
  max-height: 150px;
  overflow-y: auto;
}

基本的に、オプションを保持するulの高さを制限します。

3
p.matsinopoulos
.chzn-container .chzn-results { max-height: 150px; }
3
ozgrozer

以下のCSSクラスでリストの高さを解決することができました：

.chzn-container .chzn-results {
height: 150px;}

残りのリストの巻物をもらいました。

2
Praveen

他のすべての答えは機能しますが、これは最もエレガントな解決策だと思います：.chzn-resultsに新しい最大の高さを設定します（例：150px）。関連する他のすべてのブロックが続きます。この方法では、ドロップダウンが大きくなりすぎず、結果が少数になります。

.chzn-results {
   max-height: 150px;
}

結果がほとんどない場合でも高さを固定したい場合は、次のコードを使用します。

.chzn-results {
   height: 150px;
}

（!importantの動作をオーバーライドする必要がある場合は、chosen.cssを行に追加します）

2
Jasper Schulte

v1.8.3以降、これは機能します。

.chosen-container .chosen-results {
    max-height: 60vh;
}

vhの代わりにpxを使用することをお勧めします。これは、利用可能な画面の高さの％としてレンダリングされるため、画面から流れ出ることはありません。

0
Nikhil VJ