html - Angular:选择下拉列表中的最大选择

Question

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

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

但这只是一个小功能的大量额外代码。用 vanilla css/scss 和 html 或 angular 实现这个的最好方法是什么？

Answer 1

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

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