调整下拉菜单高度以显示更多选项 (AngularJS Material)

Question

我是 Angularjs Material 的新手，所以也许这是显而易见的事情，但我似乎无法弄明白。

我有一个多选下拉菜单，最初单击时仅显示 4 个选项，其余选项可以通过向下滚动 viewed/accessed。我正在尝试将该视图扩展到另一个静态数字（例如，无需滚动即可容纳 8 个选项）。

我发现之前问过非常相似的问题：

Make multiple-select to adjust its height to fit options without scroll bar

然而，它似乎对 "size" 和 "ng-size"

都没有任何影响

这是我的例子：

<md-input-container>
    <label>Providers</label>
    <md-select ng-size="10" ng-model="vm.selectedProviders" ng-change="vm.prov()" multiple>
        <md-optgroup label="Providers">
            <md-option ng-value="provider.namep" ng-repeat="provider in vm.providers">{{provider.namep}}</md-option>
        </md-optgroup>
    </md-select>
</md-input-container>

Answer 1

查看 md-select 的文档，似乎没有指定要显示的选项数的属性。

所以另一种可能的方法是更改 AngularJS Material 中默认设置的最大高度。它们是这样设置的：

md-select-menu, md-select-menu md-content {
    max-height: 256px;
}

对我来说，它默认显示 5 个选项（不是 4 个）。所以，我将其添加到我的 CSS:

md-select-menu, md-select-menu md-content {
    max-height: 385px;
}

并且它使所有 md-select 标签适合 8 个选项而不是 5 个。数字对您来说不必相同，所以调整高度直到您满意为止。

希望对您有所帮助。

调整下拉菜单高度以显示更多选项 (AngularJS Material)

adjust drop down menu height to show more options (AngularJS Material)

html

javascript

css

angularjs

angularjs-material