设置select2的高度答案

【问题标题】：Set height of select2设置select2的高度
【发布时间】：2017-03-13 00:42:07
【问题描述】：

如何增加select2 建议下拉菜单的高度？

.select2-results {
  max-height: 500px;
}

但是，这不起作用。如果我改为设置 min-height 属性，则会增加大小，但是，如果只有 1 或 2 个项目，我不希望有一个 500px 的巨大下拉列表......所以min-height 不是一个真正的选择。

我希望下拉菜单根据内容动态调整其高度，但在显示滚动条之前将其高度增加到 500 像素。

【问题讨论】：

【解决方案1】：

尝试使用：

.select2-results__options {
   max-height: 500px;
}

如果这不起作用，请尝试添加 !important 以便覆盖它的默认最大高度（尝试两种方法，你的和我的）。

【讨论】：

【解决方案2】：

以上答案均不适合我，但确实如此。我把它放在这里以供将来在谷歌上参考：

.select2-container--default .select2-results > .select2-results__options {
    max-height: 400px;
    min-height: 400px;
    overflow-y: auto;
}

【讨论】：

【解决方案3】：

我认为您需要同时设置.select2-drop 和.select2-results 类，如下所示：

.select2-drop {
    max-height: /* Your value here */;
    overflow: scroll;
}

.select2-results {
    max-height: 100%;
}

这样可以确保结果不受高度限制，并且下拉菜单仍然可用。如果您对其进行测试，您应该看到它适用于可变列表长度，无论您如何在.select2-drop 上设置最大高度。较短的列表应适合内容，较长的列表应在该限制内滚动。

【讨论】：