如何设置扩展“选择”元素的最大高度（jQuery插件）

Question

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

有没有办法设置：

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

这样看起来会更像这样（这是一个Photoshop，这就是我想要的样子）：

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

Answer 1

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

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

<小时/> 最初我不理解这一点，但是这个选择器实际上是应用于里面的选择的那个类（该库生成了自己的html元素，它们与<select>元素分开）它们不是指的是你，设计师将选择放入的容器，因此它们可以在任何情况下工作。

然而，即使我意识到这一点，这个选择器也无法工作，因为selected.css具有完全相同的选择器，而且因为last declared rule wins，我的规则没有效果。有两种解决方案：

• 将!important添加到您的自定义规则（可能是错误的方式）

OR

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

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

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

  如果您更改了订单，以便在之后将main.css（或任何您称为自定义样式文件）声明为，则问题也将得到解决。

Answer 2

Miguel的答案对我来说没有用，但是这样做了：

.dropdown-menu {
    max-height:250px !important;
    overflow-y: scroll;
}

Answer 3

我通过以下方式解决了这个问题。

.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;
}