角材料2选择零部件对齐

Question

我正在使用材料组件，我想知道是否可以将下拉选择的大小设置为与mat-form-field的大小完全相同。

默认组件如下：

我想对其进行修改，以使下拉列表的大小与mat-form-field完全相同，如下所示：

但我不知道如何修改下拉容器的宽度和位置，请问如何修改宽度和位置。

这是该组件的一个小示例：

https://stackblitz.com/angular/rllajkqybnmy

Answer 1

不幸的是，!important由于角材料将位置添加为style属性，因此您需要添加所添加的内容

基本上，您需要添加/更改3个属性：

• 最大宽度-如果内容较宽，则不允许更改选择
• 最小宽度-相同
• 转换-更改选择的位置

请注意，还有一个动画放置是从原始位置开始的。

这是基本更改：

.mat-select-panel {
  min-width: 180px !important;
  max-width: 180px !important;
  transform: translate(-2px, 44px) !important;
}

/* this will hide the element while it's being animated because
   the animation happens for the original position */

.mat-select-panel.ng-animating {
  display: none;
}

将其添加到您的中styles.css，因为此元素注入到组件外部。

演示：https : //stackblitz.com/edit/angular-material-select-location?file=styles.css