关于sass：Angular 2 Mat-Select是否有可能与Mat-Select-Panel具有不同的Mat-Select框宽度？


Is it possible for an Angular 2 mat-select to have a different mat-select box width than the mat-select-panel?

我无法使用材料垫选择初始选择框，因为"下拉"菜单的宽度与垫选择面板中的选项大小相同。我以前有一个简单的jQuery选择框，占位符有一个宽度，选择项/选项有一个单独的宽度。它似乎自动地做到了。我现在在选择Angular 6材质时遇到麻烦，以使其具有不同的宽度。首先，我花了很多时间来找出如何更改宽度。我终于通过使用

进行了更改

angularHTML：

1
2
3
4
5
6
7
  <mat-form-field>
    <mat select [ngclass]="{'selection-box-width' : true }" placeholder="Select an Option">
      <mat-option *ngFor="let selection of selectionList">
    Your {{selection.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

和

的SCSS

1
2
3
4
.selection-box-width {
    min-width: 512px;
    max-width: none;
}

选择框(mat-select)的宽度始终与弹出的较高z-index(mat-select-panel)的宽度相同。是否应该有办法改变宽度并使它们不同？

我回过头来回答谁回答了这个问题。对我来说，是所有人对这个概念有更好的理解。我发现虽然我需要一点CSS。我的代码如下：

1
2
3
4
5
6
7
  <mat-form-field>
    <mat select panelClass="panel-selection-width" placeholder="Select an Option">
      <mat-option *ngFor="let selection of selectionList">
        Your {{selection.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

，以及styles.scss中的SCSS：

1
2
3
.panel-selection-width {
  max-width: none !important;
}

绝对需要！important，但不需要[ngclass] =" {'selection-box-width'：true}"。我确实在组件的SCSS中需要此功能：

1
2
3
#selectionList > .mat-form-field {
    min-width:250px;
}

但现在可以使用！

谢谢

您需要同时设置两种样式。面板的样式需要通过panelClass选项应用。使用ngClass会将样式应用于选择输入，而不是面板。

1
2
3
4
<mat-select
    [ngclass]="{'selection-box-width' : true }"
    panelClass="selection-panel-width"
    ...

对于面板，您可能必须将!important与max-width设置一起使用，并且可能还要与其他设置一起使用，并且该类必须是全局类，而不是组件的一部分。

相关讨论