设置select2的高度

Question

如何增加 select2 建议下拉列表的高度？

我尝试了 https://github.com/select2/select2/issues/144 提出的想法：

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

然而，那是行不通的。如果我改为设置 min-height 属性，大小会增加，但是，如果只有 1 或 2 个项目，我不想有一个 500px 的巨大下拉菜单...所以 min-height不是一个真正的选择。

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

Answer 1

尝试使用：

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

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

Answer 2

我认为您需要按如下方式设置 .select2-drop 和 .select2-results 类：

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

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

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

Answer 3

None 上面的答案对我有用，但这个确实有用。我把它放在这里以供将来在 google 上参考：

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