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

Question

自从我没有找到解决方案以来,已经有几天了.由于mat-menu的选项是overlaptrigger属性,但在mat select下拉列表中没有可执行此操作的属性.有没有办法通过覆盖css或任何更好的解决方案来自定义mat-select下拉位置.

Answer 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文件中.你可能不需要在这里使用重要的,我有其他类围绕这个,所以我确实使用它.

Answer 2

我正在使用角度。我使用了相同的属性，并且它与panelClass. 但我是这样用的[disableOptionCentering]="true"

Answer 3

我发现解决方案为mat-select的disableOptionCentering direcrive ，因此在使用此dropdaown之后可以进行自定义。

来自timmoy：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>

Answer 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；这对我来说效果很好。

Answer 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 更改为适合您的值。