CODEWITHSUNDEEP
htmlangularangular-materiallabelmat-form-field
heliot truste
heliot truste

Reputation: 65

Angular mat-form-field input & label

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

Upvotes: 2

Views: 11540

Answers (1)

Wolfound
Wolfound

Reputation: 105

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>

Upvotes: 4

Related Questions