Question

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

我在一个带有overflow：hidden的对话框中有一个选中的框，并且所选的框绝对位于容器之外（这样所选的下拉列表就会正确地弹出对话框。）不幸的是，“position：absolute;”将它从流中移除，结果没有高度...使对话框缩小，多选择似乎从中弹出。我可以将父容器设置为固定高度，但是当选择了更多选项时，多选项会扩展，并且我仍会在长列表上遇到同样的问题。

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

Answer 1

没关系......用CSS自己想出来：

.mycontainer {
    height: 120px;
}

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

.mycontainer是持有所选下拉列表的div。

请退出编辑答案。此答案与2年前我最初提出问题时可用的选择版本一致。对于那些使用较新版本（即1.4.2）的人，您可以尝试将上面CSS中的“chzn”前缀更改为“已选择”...但不保证这将起作用（我没有看过他们的新版本）造型。）

Answer 2

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

Answer 3

这就是我的诀窍：

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

您基本上想要限制包含选项的ul的高度。

Answer 4

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

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

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

Answer 5

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

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

如果你真的想要一个固定的高度，即使结果很少，也只需使用以下代码：

.chzn-results {
   height: 150px;
}

（如果您需要覆盖!important的行为，请将chosen.css添加到行中）

Answer 6

自v1.8.3起，此功能有效：

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

我建议您使用vh而不是px：将其呈现为可用屏幕高度的百分比，这样它就不会流出屏幕。

设置多选选择框的高度

6 个答案: