jQuery 设置多选选择框的高度

Setting a multiselect Chosen box's height

提问by Joe the Coder

I'm using Chosen with a multi-select drop down, and would like to set the height of the chosen box to a set size.

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

I have a chosen box in a dialog with overflow:hidden, and the chosen box is positioned absolutely outside of the container (so that the chosen dropdown pops out of the dialog correctly.) Unfortunately, "position: absolute;" removes it from the flow, and results in no height...making the dialog shrink and the multi-select appear to pop out of it. I can set the parent container to a fixed height, but the multi-select expands as more options are selected, and I'll still run into the same problem on long lists.

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

Is there a way to set the chosen multi-select to a specific height? Thanks!

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

回答by Joe the Coder

Nevermind...figured it out on my own using CSS:

没关系……我自己用 CSS 弄明白了：

.mycontainer {
    height: 120px;
}

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

.mycontainer is the div that holds the chosen dropdown.

.mycontainer 是保存所选下拉列表的 div。

---

---

Please quit editing the answer.This answer aligns with the version of Chosen that was available 2 years ago when I originally asked the question. For those people who are using newer versions (i.e. 1.4.2), you can try changing the "chzn" prefix in the above CSS to "chosen"...but no guarantees this will work (I haven't looked at their new styling.)

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

回答by p.matsinopoulos

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.

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

回答by ozgrozer

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

回答by Jasper Schulte

All of the other answers work, but I believe this is the most elegant solution: Set a new maximum height for .chzn-results(e.g. 150px). All the relevant other blocks will follow. This way the dropdown will not be too big with only a few results.

所有其他答案都有效，但我相信这是最优雅的解决方案：为.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 !importantto line if you need to override chosen.css's behaviour)

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

回答by Praveen

I was able to solve the list height in the below css class:

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

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

and I got the scroll for the remaining the list.

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

回答by Nikhil VJ

as of v1.8.3, this works:

从 v1.8.3 开始，这有效：

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

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

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