如何设置展开的“选择”的最大高度，元素（jQuery插件） [英] How do you set the max height of an expanded "Chosen" element (jQuery plugin)

问题描述

目前我在JQuery对话框中使用Chosen JQuery小部件，一旦打开下拉框，下拉框的大小会导致对话框溢出，导致：（注意有两个滚动条，一个用于下拉框，一个用于对话框，这使得滚动几乎无用：

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:

有办法设置：

• 在您滚动之前显示的项目数上限，


• 选择/选择下拉框的高度或


• 包含元素之一的最大高度

这样它会更像这样（这是一个photoshop，这是我想要的外观）：

Such that it will appear more like this (it's a photoshop, this is how I want it to look):

ie no

推荐答案

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

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

---

最初我不明白这一点，这个选择器实际上是应用到里的 选项（库生成了自己的html元素，它们与< select> 元素分开）不是指你，设计师已经选择的容器，所以他们将在任何情况下工作。

---

Initially I didn't understand this, but this selector is actually applying to classes inside the Chosen (the library generates its own html elements that are seperate from the <select> element) They aren't referring to the container that you, the designer, have put the Chosen in, so they will work in any situation.

然而，即使我意识到，选择器不会工作，因为selected.css具有完全相同的选择器，并且因为最后声明的规则获胜，我的规则没有效果。有两种解决方案：

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:

• 将！important 添加到您的自定义规则可能是不正确的方式）

• Add !important to your custom rule (probably the incorrect way)

或

• 确保你的styles.css在 chosen.css之后被声明为。我的链接按此顺序：

• Make sure your styles.css is declared after chosen.css. My links were in this order:

< link rel =stylesheethref =css / main.css>

< link rel =stylesheethref =chosen / selected.css>

如果您更改顺序，以便在之后宣告您的main.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.

这篇关于如何设置展开的“选择”的最大高度，元素（jQuery插件）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！