Angular 2 mat-select是否有可能具有与mat-select-panel不同的mat-select框宽度？

Question

我在使用材料mat-select初始选择框时遇到问题，“下拉”菜单的宽度与mat-select-panel中的选项大小相同。我之前有一个简单的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

我回过头来回答这个问题。对我而言，对我来说，要更好地理解这个概念。我发现虽然有一些我需要的CSS。我的代码如下：

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

并且，在styles.scss中，一个SCSS：

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

肯定需要！important，但不需要[ngclass] =“{'selection-box-width'：true}”。我在组件的SCSS中确实需要这个：

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

但它现在有效！

谢谢

Answer 2

你需要两种风格。面板的样式需要通过panelClass选项应用。使用ngClass将样式应用于选择输入，但不应用于面板。

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

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

Answer 3

材质选择依赖于CDK及其OverlayModule：长篇故事简短，叠加创建一个相对于选择定位的面板。

这意味着此面板的大小根据其父级的位置（此处为选择）。

如果你想改变它，你将不得不看看their documentation（或检查HTML元素，但也可能从中学到一些东西）来找出面板的类（默认的一个，而不是一个）你的提供）：

class="mat-select-panel {{ _getPanelTheme() }}"

如果你检查元素，你确实看到这个类：

class="ng-trigger ng-trigger-transformPanel ng-tns-c2-1 mat-select-panel mat-primary ng-star-inserted mat-select-panel-done-animating"
                                                            |
                                                            |
                                                          HERE !

有了这个，你可以简单地知道要改变什么来增加面板尺寸：

.mat-select-panel {
  width: 200% !important;
  min-width: 200% !important;
  max-width: none !important;
}

您将不得不使用!important并将其放在您的全局样式表中，因为CSS选择器不具有高精度（即它将首先应用并被其他规则覆盖），并且因为它来自库，您可以'使用组件封装的视图。

如果您愿意，您也可以为您的面板提供自定义课程

panelClass="yourCustomClass"

这将允许您将此样式应用于特定选择，而不是每个人都应用。