如何自定义 mat-select 下拉位置？答案

【问题标题】：How to customize mat-select dropdown position?如何自定义 mat-select 下拉位置？
【发布时间】：2017-12-26 21:37:53
【问题描述】：

我已经好几天没有找到解决方案了。由于 mat-menu 有一个选项是 overlaytrigger 属性，但在 mat select 下拉菜单中没有执行此操作的属性。有没有办法通过覆盖css或任何更好的解决方案来自定义mat-select下拉位置。

【问题讨论】：

嘿，我遇到了同样的问题，我正在研究 mat-select 的 panelClass 选项，但是，我找不到任何解决方案......你找到了吗？
@Flow 其实只是class。
请问您找到解决方案了吗？
@nour 抱歉，有很多方法，但不是一个确切的解决方案，所以我们仍在等待 angular 解决这个问题，但您可以使用下面的链接 w3schools.com/howto/howto_css_dropdown.asp w3schools.com/howto/howto_js_dropdown.asp

标签： angular angular-material

【解决方案1】：

<mat-select placeholder="Language" disableOptionCentering panelClass="myPanelClass">
    <mat-option *ngFor="let locale of locales" [value]="locale">
        {{locale}}
    </mat-option>
</mat-select>

像上面一样使用 disableOptionCentering 和 panelClass。然后在您的 styles.scss 中引用您的 panelClass 并执行

.myPanelClass{
    margin-top: 30px !important; 
}

这对我有用。请注意，scss 必须在您的 styles.scss 中，而不是您组件的 scss 文件中。你可能不需要在这里使用重要的，我有其他的类，所以我确实使用了它。

【讨论】：

这应该是正确的答案。正如您所描述的，重要不是必需的。也可以从本地样式文件中使用::ng-deep
@Marius 我注意到使用 ::ng-deep 作为组件 css 的第一层会引入一些奇怪的行为，至少使用 ng serve 时，全局样式仅适用于此组件加载。因此，如果某些其他元素受到此全局样式的影响，您可能会在加载此组件之前和之后注意到不同的样式。所以现在我总是在前面加上:host，但是在这种情况下那是行不通的。
记得将该类放在styles.css 中，因为按钮是在组件外部的叠加层中创建的。
我尝试同时放置 disableOptionCentering 和 panelClass 但在检查元素时找不到 panelClass。可能是什么问题？
disableOptionCentering 修复了我在选择面板定位时遇到的奇怪行为。谢谢！

【解决方案2】：

我发现解决方案是 disableOptionCentering direcrivive for mat-select，所以在使用这个 dropdaown 之后可以自定义。

来自蒂莫伊： https://github.com/angular/material2/pull/9885

示例用法：

<mat-select
    [(ngModel)]="currentPokemon"
    [required]="pokemonRequired" 
    [disabled]="pokemonDisabled" 
    #pokemonControl="ngModel" 
    disableOptionCentering>
<mat-option 
    *ngFor="let creature of pokemon" 
    [value]="creature.value">
{{ creature.viewValue }}
</mat-option>
</mat-select>

【讨论】：

【解决方案3】：

我正在使用 Angular。我使用了相同的属性，它适用于panelClass。但是我是这样用的[disableOptionCentering]="true"

【讨论】：

【解决方案4】：

尝试更新

.cdk-overlay-pane  { 
  position:absolute;
  pointer-events:auto;
  box-sizing:border-box;
  z-index:1000;
  display:flex;
  max-width:100%;
  max-height:100%;
  transform:none !important; 
  margin-top:22px;
}

在@angular\material\prebuilt-themes\indigo-pink.css 中。

添加了转换：无！重要；边距顶部：22px；这对我来说效果很好。

【讨论】：

很好的解决方案，但它搞乱了自动完成下拉菜单的定位。

【解决方案5】：

//添加这个

.mat-select-panel-wrap{
    position: relative;
    top: 26px;
}

.mat-select-panel-wrap .mat-select-panel{
    min-width: calc(100% + 12px) !important;
    transform: translateX(4px) !important
}

//将26px、12px和4px改成适合自己的。

【讨论】：