Angular Material Select menu not showing correctly

Question

I am using Angular Material for my project, I am using a select option but the positioning of the drop down messes up when opening.

1st:

2nd:

The first issue shows the dropdown appearing much higher than the select element. The second issue shows that options coming up over the select element, but this is the bottom of the page so anything after the 1st option cannot be seen/selected.

The code I'm using is:

<mat-form-field>
  <mat-select placeholder="Favorite food" disableOptionCentering>
    <mat-option value="Pizza">
      Pizza
    </mat-option>

    <mat-option value="Taco">
      Taco
    </mat-option>

    <mat-option value="Kebab">
      Kebab
    </mat-option>

    <mat-option value="Burgers">
      Burgers
    </mat-option>
  </mat-select>
</mat-form-field>

This is taken directly from the Angular Material site. I have also tried to add "disableOptionCentering" as a parameter, to disable the centering of options, but it does not work.

Any help is appreciated.

Thank you

Answer 1

I'm sure you have already, but make sure you followed everything on this guide: https://material.angular.io/guide/getting-started

Did you install @angular/animations correctly and remember to import BrowserAnimationsModule?

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }