首页 文章

角度材料2选择组件对齐

提问于
浏览 次
2

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

默认组件如下：

enter image description here

我想修改它，以使下拉列表与mat-form-field完全相同，如下所示：

enter image description here

但我不知道如何修改下拉容器的宽度大小和位置，如何修改宽度大小和位置 .

这是一个组件的小例子：

https://stackblitz.com/angular/rllajkqybnmy

javascript angular angular-material angular-material2

1 回答

  • 2

    不幸的是，您需要将 !important 添加到您添加的内容，因为角度材质会将位置添加为 style 属性

    基本上，你需要添加\更改3个属性：

    • max-width - 如果内容较宽，则不允许选择更改

    • min-width - 相同

    • transform - 更改选择的位置

    请注意，仍然存在从原始位置开始的动画放置 .

    这是基本的变化：

    .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

    回复于

相关问题