Mat-select dropdown options not aligned

Question

I'm fairly new to Angular and was using the mat-select module to create a dropdown menu. While I'm able to create the dropdown the mat-options are not centered under the dropdown selector. The selector is positioned at the top of the page and the options display at the very bottom of the page. Here is my code:

  <mat-form-field appearance="fill">
            <mat-select [(ngModel)]="sortType" (ngModelChange)="applyFilter()">
              <mat-option value="likelihood">Match Likelihood</mat-option>
              <mat-option value="distance">Distance</mat-option>
            </mat-select>
        
  </mat-form-field>

This post describes a similar issue, and I have tried the suggested solution. Also there is no additional CSS styling applied. Is there a way to get the options to appear directly below the dropdown?

Answer 1

This is the general behavior. If there's enough space the selected option in the Dropdown has to align with the trigger,. You can disable this behavior by setting the disableOptionCentering attribute.