CODEWITHSUNDEEP
htmlcssangularangular-material
bot_73
bot_73

Reputation: 45

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

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: enter image description here

I expect smth like that:enter image description hereenter image description here

Upvotes: 1

Views: 2524

Answers (1)

bot_73
bot_73

Reputation: 45

@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";

Upvotes: 2

Related Questions