17

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

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

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

4

6 に答える 6

21

気にしないで... 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" プレフィックスを "chosen" に変更してみてください。スタイリング。）

于 2012-09-28T13:58:03.537 に答える
3

これは私のためにトリックをしたものです：

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

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

于 2015-04-23T13:40:44.513 に答える
3 
.chzn-container .chzn-results { max-height: 150px; }
于 2013-02-25T12:35:51.980 に答える
2

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

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

そして残りのリストの巻物を手に入れました。

于 2013-02-21T14:32:21.473 に答える
2

他のすべての回答は機能しますが、これが最もエレガントな解決策であると思います:(.chzn-resultsたとえば150px)の新しい最大高さを設定します。関連する他のすべてのブロックが続きます。このようにして、ドロップダウンが大きくなりすぎず、結果がわずかになります。

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

結果がほとんどなくても、本当に固定の高さが必要な場合は、次のコードを使用するだけです。

.chzn-results {
   height: 150px;
}

!important( の動作をオーバーライドする必要がある場合は、行に追加してくださいchosen.css)

于 2013-06-13T15:52:27.693 に答える