如何自定义 mat-select 下拉位置? [英] How to customize mat-select dropdown position?

问题描述

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

Its been couple of days since i have not found the solution for this. As there is an option for mat-menu that is overlaptrigger property but there is no property to perform this in mat select dropdown. Is there any way to customize the mat-select dropdown position by overriding the css or any better solution.

推荐答案

<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 并执行

Utilize disableOptionCentering and panelClass like I have above. Then within your styles.scss reference your panelClass and do

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

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

This worked for me. Note that the scss must be in your styles.scss not your component's scss file. You might not need to use important here, I have other classes around this so I did use it.

这篇关于如何自定义 mat-select 下拉位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！