Angular material : Make select-panel open down always

Question

I am using angular material for my app and I would like the mat-select to show the panel always under the input.

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;
}

Answer 1

just added [disableOptionCentering]="true" to the mat-select and it is working fine !

Answer 2

You can do that:

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