Angular：选择下拉列表中的最大选择

Question

我正在 Angular(v5) 中制作一个项目，我想创建一个下拉选择语句，并在一侧显示最多 7 个元素，并在一侧有一个滚动条，允许用户滚动查看其余部分。我想这样做是因为目前在较小的屏幕上，我的 select 语句的内容超出了屏幕：

最好的方法是什么？我知道我可以导入语义 UI 之类的东西来做我想做的事情：

但是对于一个小功能来说，这是很多额外的代码。用 vanilla css/scss 和 html 或 angular 实现这一点的最佳方法是什么？

Answer 1

一个非常简单的解决方案是只使用纯 CSS 来完成此操作。只需使用您的下拉类（即.dropdown-menu）并添加属性以隐藏溢出并设置高度。

.dropdown-menu {
       max-height: 400px; /* Height you want menu to display */
       overflow-y: auto; /* Sets the container to scroll vertically */
}