Angular material select box not showing properly

Question

I an Angular 8 project with Angular Material, I have a form and in it I need to add a select box that have this style:

design

Note the label "Select an option" style how stands in the middle of the line.

The html code:

<mat-form-field>
  <mat-label> Select an option</mat-label>
  <mat-select>
    <mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
  </mat-select>
</mat-form-field>

The ts code:

types: string[] = [
    'Charmander', 'Bulbasaur', 'Squirtle'
  ];

I can't find anywhere in the documentation how to make the "Select an option" to stay in the middle of the line. Here is the stackblitz link

Can someone help me please?

ttquang1063750 · Accepted Answer · 2020-10-17 15:28:22Z

2

set appearance to outline like below:

<mat-form-field appearance="outline">
    <mat-label> Select an option</mat-label>
    <mat-select>
        <mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
    </mat-select>
</mat-form-field>

answered Oct 17, 2020 at 15:28

ttquang1063750

8736 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular material select box not showing properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related