jquery - 设置多选选择框的高度

Question

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

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

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

Answer 1

没关系......我自己用 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”......但不能保证这会起作用（我没有看过他们的新造型。）

Answer 2

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

Answer 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.

Answer 4

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

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

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

Answer 5

所有其他答案都有效，但我相信这是最优雅的解决方案：为.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)

Answer 6

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.