Question

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

对其进行了更改

角度HTML：

<div id="selectionList">
  <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>
</div>

和SCSS的

.selection-box-width {
    min-width: 512px;
    max-width: none;
}

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

Answer 1

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

ngClass

对于面板，您可能必须将<mat-select [ngclass]="{'selection-box-width' : true }" panelClass="selection-panel-width" ...与最大宽度设置（可能还有其他设置）一起使用，并且该类需要是全局类，而不是组件的一部分。

Angular 2垫选择框是否可能具有与垫选择框不同的垫选择框宽度？

1 个答案: