如何控制角度材质中的md-select下拉位置

Question

我需要自定义md-select,以便选项列表更像传统的选择.选项应显示在select元素下方,而不是悬停在元素顶部.有没有人知道存在这样的东西,或者如何实现这个目标？

Answer 1

你去吧 - CodePen

使用该md-container-class属性.来自文档:

标记

<div ng-controller="AppCtrl" class="md-padding" ng-cloak="" ng-app="MyApp">
  <md-input-container>
    <label>Favorite Number</label>
    <md-select ng-model="myModel" md-container-class="mySelect">
      <md-option ng-value="myVal" ng-repeat="myVal in values">{{myVal.val}}</md-option>
    </md-select>
  </md-input-container>
</div>

CSS

.mySelect md-select-menu {
  margin-top: 45px;
}

JS

(function () {
  'use strict';
  angular
      .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
      .controller('AppCtrl', function($scope) {
        $scope.required = "required";
        $scope.values = [
          {val:1, des: 'One'},
          {val:2, des: 'Two'}
        ];
      });
})();

Answer 2

这适用于Angular 2+的材质

使用disableOptionCentering选项，例如：

<mat-select disableOptionCentering>
  <mat-option *ngFor="let movie of movies" [value]="movie.value">
    {{ movie.viewValue }}
  </mat-option>
</mat-select>

Answer 3

所以这就是我必须用 Javascript 和 setTimeout 做的事情，尽管解决方案很丑陋。仅使用 CSS 无法有效地做到这一点，因为 Material Design 使用下拉菜单的 javascript 定位。因此，我必须将一个函数附加到内部的弹出窗口，我设置了 200 毫秒的超时，用于计算屏幕上下拉列表的所需位置并将其移动到那里。我还在控制器中附加了一个函数到窗口调整大小事件，这样它就会随着调整大小而移动。

最终，您必须使用超时来获得材料设计时间来执行基于 javascript 的弹出窗口移动，然后自己移动它。我还使用了一个技巧来在移动发生时隐藏它，这样用户就看不到跳跃。这就是我必须做的事情的描述，以防其他人尝试类似的情况。