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

我已经为 mat-select 找到了解决方案 disableOptionCentering direcrive，因此使用此dropdaown后可以自定义。

来自timmoy的

： tf.matmul

使用示例：

<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 3

尝试更新

.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中。

添加了transform：none！important; margin-top：22px;这对我来说很好。

Answer 4

我正在使用 Angular。我使用了相同的属性，它与 panelClass 一起工作正常。但我是这样用的[disableOptionCentering]="true"

Answer 5

我还将disableOptionCentering与mat-select和panelClass一起使用，但是当下拉位置位于页面底部并且下拉菜单中确实有多个选项时，我遇到了问题。当我在下拉列表中滚动并选择最后一个选项时，叠加层会上升，并根据panelClass定义中给出的边距顶部计算错误的偏移量。

请在此处找到记录的问题参考 https://github.com/angular/components/issues/18045

Answer 6

//添加此

.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更改为适合您的颜色。

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

6 个答案: