角材料：使选择面板始终打开答案

【问题标题】：Angular material : Make select-panel open down always角材料：使选择面板始终打开
【发布时间】：2021-04-11 14:35:02
【问题描述】：

我正在为我的应用程序使用角度材质，我希望 mat-select 始终在输入下方显示面板。

html

<mat-form-field class="flex-competition-select" appearance="fill">
    <mat-select (selectionChange)="getCompetitionsList($event.value)" [(ngModel)]="selectedSport">
        <mat-option *ngFor="let sport of sportsArray" [value]="sport.id">
            <mat-label> <b>{{sport.name | uppercase}}</b></mat-label>
        </mat-option>
    </mat-select>
</mat-form-field>

CSS

.flex-competition-select {
    background: white;
    border-color: white;
    border-style: solid;
    border-radius: 0.2em;
    border-width: 1px;
    font-size: 15px;
    text-align: center;
    margin: 2px;
    width: 300px;
    height: 56px;
}

【问题讨论】：

标签： html css angular angular-material angular10

【解决方案1】：

刚刚将[disableOptionCentering]="true" 添加到mat-select，它工作正常！

【讨论】：

【解决方案2】：

你可以这样做：

<mat-form-field appearance="fill">
 <mat-select disableOptionCentering panelClass="customClass (selectionChange)="getCompetitionsList($event.value [(ngModel)]="selectedSport">
   <mat-option *ngFor="let sport of sportsArray" [value]="sport.id">
        <mat-label> <b>{{sport.name | uppercase}}</b></mat-label>
    </mat-option>
 </mat-select>
</mat-form-field>

style.scss：

.customClass {
  margin-top: 35px;
  // whatever you want
}

【讨论】：