javascript - 如何使用 Angular Material 设计完全扩展下拉列表？

Question

我有这个下拉元素。

如果完全打开，我该如何制作？没有卷轴？

我试过了

CSS:

.full-select{
   overflow-y: auto;
}

HTML:

<md-input-container class="hide-error-msg">
  <label>Filter</label>
  <md-select full-select ng-model="$ctrl.selectedSearchOption">
    <md-option full-select ng-repeat="option in $ctrl.searchOptions" value="{{option}}">
      {{option}}
    </md-option>
  </md-select>
</md-input-container>

Answer 1

您可以使用以下 css 规则:

.long-list > md-select-menu, .long-list > md-select-menu > md-content {
  max-height:none;
}

在 md-select 上指定 md-container-class 时:

<md-select md-container-class="long-list" ...></md-select>

对于大型选择列表，这可能会变得非常糟糕，所以要小心。

笨蛋:https://plnkr.co/edit/Enqrmjqe4VNyE6l4dIcB?p=preview