如何设置展开的“选择”元素的最大高度（jQuery 插件）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21111652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you set the max height of an expanded "Chosen" element (jQuery plugin)
提问by Migwell
At the moment I'm using a Chosen JQuery widget inside a JQuery dialog box, and as soon as you open the dropdown box, the size of the dropdown causes the dialog box to overflow, causing this: (notice that there are two scroll bars, one for the drop down box, and one for the dialog box, which renders scrolling pretty much useless:
目前我在 JQuery 对话框中使用了一个 Chosen JQuery 小部件，只要你打开下拉框，下拉框的大小就会导致对话框溢出，导致这个：（注意有两个滚动条，一个用于下拉框，一个用于对话框，这使得滚动几乎没有用：
Is there a way to set:
有没有办法设置：
- The max number of items displayed before you have to scroll,
- The max height of the select/chosen drop down box, or
- The max height of one of the containing elements
- 滚动前显示的最大项目数，
- 选择/选择下拉框的最大高度，或
- 包含元素之一的最大高度
Such that it will appear more like this (it's a photoshop, this is how I want it to look):
这样它看起来更像这样（这是一个Photoshop，这就是我想要的样子）：
i.e. no overflow in the dialog window, because there are only 8 items displayed before you have to scroll.
即对话窗口中没有溢出，因为在您必须滚动之前只显示了 8 个项目。
回答by Migwell
tl;dr: Add this CSS rule to your styles.css:
tl;dr：将此 CSS 规则添加到您的 styles.css 中：
.chosen-container .chosen-results {
max-height:100px;
}
最初我不明白这一点，但这个选择器实际上适用于类 inside在选择的内部（库生成自己的与元素分开的 html 元素
<select><select>）它们不是指您，设计师，将选择的容器放入其中，因此它们可以在任何情况下工作。However even when I realised that, this selector wouldn't work as chosen.css has the exact same selector, and because the last declared rule wins, my rule had no effect. There are two solutions to this:
然而，即使我意识到这一点，这个选择器也不会工作，因为 selected.css 具有完全相同的选择器，并且因为最后声明的规则 wins，我的规则无效。对此有两种解决方案：
- Add
!importantto your custom rule (probably the incorrect way)
- 添加
!important到您的自定义规则（可能是不正确的方式）
OR
或者
Make sure your styles.css is declared afterchosen.css. My links were in this order:
<link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="chosen/chosen.css">If you change the order so that your main.css (or whatever you've called your custom styles file) is declared after, the problem will also be solved.
确保你的styles.css在selected.css之后声明。我的链接按以下顺序排列：
<link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="chosen/chosen.css">如果更改顺序，使您的main.css（或任何你叫你的自定义样式文件）声明后，这一问题也将得到解决。
回答by Kelsey
Miguel's answer didn't work out for me, but instead this did:
Miguel 的回答对我不起作用，但这样做了：
.dropdown-menu {
max-height:250px !important;
overflow-y: scroll;
}
回答by Rajkumar R
I solved this issue by the following way.
我通过以下方式解决了这个问题。
.chosen-container .chosen-results {
color: #444;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0 4px 4px 0;
padding: 0 0 0 4px;
max-height: 240px;
-webkit-overflow-scrolling: touch;
}
