17

我正在使用带有多选下拉菜单的 Chosen，并希望将所选框的高度设置为设定的大小。

我在一个带有溢出的对话框中有一个选择的框：隐藏，并且选择的框绝对位于容器之外（以便选择的下拉菜单正确弹出对话框。）不幸的是，“位置：绝对；” 将其从流程中删除，并导致没有高度...使对话框缩小并且多选似乎从中弹出。我可以将父容器设置为固定的高度，但是随着选择更多选项，多选择的扩展将扩展，并且我仍然会在长列表上遇到相同的问题。

有没有办法将选择的多选设置为特定高度？谢谢！

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 
.chzn-container .chzn-results { max-height: 150px; }
于 2013-02-25T12:35:51.980 回答
3

This is what did the trick for me:

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

You basically want to limit the height of the ul that holds the options.

于 2015-04-23T13:40:44.513 回答
2

我能够在下面的 css 类中解决列表高度：

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

我得到了剩余列表的滚动条。

于 2013-02-21T14:32:21.473 回答
2

所有其他答案都有效，但我相信这是最优雅的解决方案：为.chzn-results（例如150px）设置一个新的最大高度。所有相关的其他块将紧随其后。这样下拉列表不会太大，只有几个结果。

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

If you really want a fixed height, even with few results, simply use the following code:

.chzn-results {
   height: 150px;
}

(Add !important to line if you need to override chosen.css's behaviour)

于 2013-06-13T15:52:27.693 回答
0

as of v1.8.3, this works:

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

I'll recommend using vh instead of px : renders it as a % of available screen height, so it won't flow out of the screen.

于 2018-11-25T15:11:48.463 回答