Angular mat-form-field input & label

user_17070825 0
Viewed 2397

I use an angular material component to make a form, so I use mat-form-field.

I would like to have the label on the left and a text input field on the right. How can I do this? In the example on the official doc it is not possible to do this.

html

<div class="container">
  <mat-form-field appearance="legacy">
    <mat-label>Nom</mat-label>
    <input matInput formControl="nom">
  </mat-form-field>
</div>

expected result:

enter image description here

mat-form-field angular-material angular label html
1 Answers

You can use Flexbox CSS: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

And you will have something like this:

.row {
  display: flex;
  flex-direction: row;
}
<div class="container">
  <mat-form-field class="row" appearance="legacy">
    <mat-label>Nom:</mat-label>
    <input matInput formControl="nom">
  </mat-form-field>
</div>

user_170716210
Related