设置多选选择框的高度

Posted 2023-05-07

【中文标题】设置多选选择框的高度

【英文标题】：Setting a multiselect Chosen box's height

【发布时间】：2012-09-20 09:17:11

【问题描述】：

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

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

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

【参考方案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”......但不能保证这会起作用（我没有看过他们的新样式。）

【讨论】：

你可以选择它作为答案！谢谢顺便说一句。

我添加了“.mycontainer .ms-list”并且工作正常。 （不是 .chzn-container-multi .chzn-choices）

这在 1.6.2 中不起作用 - 高度会改变，但内部元素不会像预期的那样垂直居中。

【参考方案2】：

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

【讨论】：

一些解释可能有助于这里的答案。

【参考方案3】：

这就是我的诀窍：

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

你基本上是想限制保存选项的 ul 的高度。

【参考方案4】：

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

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

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

【参考方案5】：

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

.chzn-results 
   max-height: 150px;

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

.chzn-results 
   height: 150px;

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

【参考方案6】：

从 v1.8.3 开始，这有效：

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

我建议使用vh 而不是px：将其呈现为可用屏幕高度的百分比，因此它不会溢出屏幕。