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

问题描述

已经两天了，因为我还没有找到解决方案.由于mat-menu有一个选项，那就是overlaptrigger属性，但是在mat select下拉列表中没有可以执行此操作的属性.是否有任何方法可以通过覆盖CSS或任何更好的解决方案来自定义垫选下拉列表位置.

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文件中.您可能不需要在这里使用重要的东西，因为我周围还有其他类，所以我确实使用了它.

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.

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