Mat Select appears in the bottom of the page

Question

I have a problem while trying to show the list of values contained in a <mat-select>. I get all the list of options in the bottom of the page instead of showing them next to the arrow of the <mat-select>.

Answer 1

Include a theme, e.g. by adding this line to your styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Answer 2

You don't need to include any pre-built Angular themes and doing so might interfere with custom themes. You only need to include the mat-core() mixin from angular theming.

Add this to your styles.scss

@import "../node_modules/@angular/material/theming";
@include mat-core();