CODEWITHSUNDEEP
cssangular-materialangular2-templateangular2-forms
Sebastian Slutzky
Sebastian Slutzky

Reputation: 379

Form layout breaks if mat-form-field is in a component

If I use mat-form-fields directly in a form, fields are displayed in a "column" flow, as follows

<h1>Form 1</h1>
<form class="example-form">
  <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
 <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
 <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
 <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
</form>

however, if the mat-form-fields are moved to an angular component, the fields are displayed in a row layout

<h1>Form 2</h1>
<form class="example-form1">
  <input-field></input-field>
  <input-field></input-field>
  <input-field></input-field>
  <input-field></input-field>
</form>

where the input-field component's template is defined as follows:

<mat-form-field >
  <input matInput  placeholder='Name' value="world" readonly='true'>
</mat-form-field>

and this is the end result. Form1 (no angular component) and Form 2(fields angular components)

Same form, with and without components

https://stackblitz.com/edit/angular-b3rxbf?embed=1&file=app/input-field.html

Is there any change I should do to my component's CSS?

Upvotes: 1

Views: 3199

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

Your first form has max-width: 500px;, forcing the inputs to wrap. Second form takes all available space, which just so happens to be enough for all fields to fit in one row.

Upvotes: 1

Related Questions