如何设置扩展"选择"元素的最大高度(jQuery插件)

Question

目前我正在使用JQuery对话框中的Chosen JQuery小部件,并且只要打开下拉框,下拉列表的大小就会导致对话框溢出,导致:(注意有两个滚动条,一个用于下拉框,一个用于对话框,这使得滚动几乎无用:

有没有办法设置:

• 必须滚动之前显示的最大项目数,
• 选择/选择下拉框的最大高度,或
• 其中一个包含元素的最大高度

这样看起来会更像这样(这是一个Photoshop,这就是我想要的样子):

即在对话框窗口中没有溢出,因为在您必须滚动之前只显示了8个项目.

Answer 1

tl; dr:将此CSS规则添加到styles.css:

.chosen-container .chosen-results {
    max-height:100px;
}

最初我不明白这一点,但是这个选择器实际上是应用于Chosen 内部的类(库生成自己的html元素,与<select>元素分开)它们不是指你,设计师所放的容器选择进入,所以他们将在任何情况下工作.

然而,即使我意识到这一点,这个选择器也无法工作,因为selected.css具有完全相同的选择器,并且因为最后声明的规则获胜,所以我的规则没有效果.有两种解决方案:

• 添加!important到您的自定义规则(可能是不正确的方式)

要么

• 确保在 selected.css 之后声明styles.css .我的链接按此顺序排列:

  <link rel="stylesheet" href="css/main.css">

  <link rel="stylesheet" href="chosen/chosen.css">

  如果更改顺序,使您的main.css(或任何你叫你的自定义样式文件)宣布之后,这个问题也将得到解决.