html - Mat-option appears at the bottom of the page instead of appearing under mat-select

Question

I want to create a drop-down menu, everything works, but my "mat-option" appears at the end of the page, and I have no ideas why. Please explain me what I am doing wrong?

<mat-form-field appearance="fill">
    
          <mat-select [(ngModel)]="this.selectedValue" name="food">
            <mat-option *ngFor="let food of foods" [value]="food.value">
              {{food.viewValue}}
            </mat-option>
          </mat-select>
    
        </mat-form-field>

My css:

mat-form-field {
  font-size: inherit;
  font-weight: 400;
  line-height: 1.125;
  font-family: Roboto,Helvetica Neue,sans-serif;
  letter-spacing: normal;
  border: 2px solid silver;
  border-radius: 10px;
  height: 40px;
  width: 100%;
  position: relative;
  top: 50px;
}



mat-select {
  display: inline-table;
  cursor: pointer;
  position: inherit;
  position: relative;
  top: 0;
  left: 0;
  border-radius: 5px;
  box-sizing: border-box;
}

mat-option {
  font-size: inherit;
  font-weight: 400;
  font-family: Roboto,Helvetica Neue,sans-serif;
  border: 2px solid silver;
  border-radius: 10px;
  height: 40px;
  position: relative;
  top: 0;
  left: 0;
  width: 92%;
}

What i have:

I expect smth like that:

question from:https://stackoverflow.com/questions/65848061/mat-option-appears-at-the-bottom-of-the-page-instead-of-appearing-under-mat-sele

Answer 1

@DocziSlizard, Thanks! I add import "~@angular/material/prebuilt-themes/indigo-pink.css"; to my style.css and it solved my problem!

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