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

Posted 2023-05-07

【中文标题】如何设置扩展的“选择”元素的最大高度（jQuery 插件）

【英文标题】：How do you set the max height of an expanded "Chosen" element (jQuery plugin)

【发布时间】：2014-02-02 09:37:13

【问题描述】：

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

有没有办法设置：

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

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

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

【问题讨论】：

为什么不看看documentation 和你的最大高度：.chosen-container .chosen-results max-height:100px;，可以通过检查元素找到

从上面的链接中，将宽度设置为小于 100%，并调整它以使容器不会“溢出”。

在滚动之前减少可见项目的数量。尝试将其设为 6 而不是 8。我认为该属性是 max_selected_options。

@Pete 是的，我想我读过那篇文章 - 问题是我无法知道 .chosen-container 和 .chosen-results 是什么类型的元素，更不用说它们的继承了

@abhitalks 设置可以选择但不影响显示

的最大事物数量

【参考方案1】：

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

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

---

最初我不明白这一点，但这个选择器实际上应用于选择的类 inside （库生成自己的 html 元素，这些元素与 <select> 元素分开）他们不是指您，设计师，将选择的容器放入其中，因此它们可以在任何情况下工作。

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

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

或

确保您的 styles.css 是在 selected.css 之后声明的。我的链接按以下顺序排列：

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

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

如果您更改顺序，以便 在 之后声明 main.css（或您所称的自定义样式文件），问题也将得到解决。

【讨论】：

所以这可以并且需要通过 CSS 使用 !important?我希望是否有更好的内置 Dojo 选项.. :(

没有。阅读整篇文章

使用Chosen IMHO的全部意义在于多选。为此，您必须调整 max-height 的值 .chosen-container-multi

【参考方案2】：

Miguel 的回答对我来说并不奏效，但确实如此：

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

【参考方案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;