我正在为我的应用程序使用角材料,我希望 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;
}
答案 0 :(得分:1)
刚刚将 [disableOptionCentering]="true"
添加到 mat-select
并且它工作正常!
答案 1 :(得分:1)
你可以这样做:
<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
}