首页 文章

Mat-select面板最小宽度

提问于
浏览 次
0

我正在尝试使用多个复选框自定义mat-select . 由于某种原因，面板错误的最小宽度如下：

enter image description here

我不知道它在哪里计算这个最小宽度 . 我也尝试添加panelClass并覆盖此类的最小宽度，例如：

<mat-select #multipleSelect (selectionChange)="selectItem($event.value)" panelClass="multiple-panel" multiple>      

&.multiple-panel {
   min-width: 200px !important;
}

但是当打开下拉列表时，它以原始宽度打开（如图中所示），并在几毫秒后“跳转”到面板类中定义的自定义最小宽度 .

我发现mat-select非常难以设计 . 谁知道如何解决这个问题？

angular-material angular5 angular-material2 angular-material-6

1 回答

  • 1

    您可以通过提供面板类（如您所述）来设置 mat-select 对话框的样式 .
    请按照此演示：https://stackblitz.com/edit/angular-matselect-style?file=src/styles.css
    查看样式 mat-select 组件 .

    Reason :

    • 延迟的原因是对话框的角度，在 cdk-overlay-container 容器内创建一个 cdk-overlay-pane ，所以在 mat-select 的情况下，它提供了180px的最小宽度，在我们的面板类稍微延迟时会被覆盖 .

    • 是的，打开对话框并将其宽度自定义为面板类中提供的指定宽度会稍有延迟 . 但是在我正在进行的项目中，延迟是可以接受的 .
      因此，您可以找到用于样式化 mat-select 组件的演示，因为我提供了2个组件，您可以修改任何css属性 .

    • 尝试使用 ::ng-deep 或 :host >>> 使用样式，如果没有找到任何运气，
      请将样式粘贴在 style.css 中 .

    回复于

相关问题