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

Question

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

我有一个多选下拉菜单，最初点击时只显示 4 个选项，其余的可以通过向下滚动查看/访问。我正在尝试将该 View 扩展到另一个静态数字(例如，无需滚动即可容纳 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 个。数字对您来说不必相同，所以调整高度直到您满意为止。

希望对您有所帮助。