Angular 5 material design full-width inputs

I’m new to angular 5, so I need to make a form with full-width inputs, and I want to every input take the whole width of its container, however, it only takes up half of it.

Here is what I’m getting

I’m using angular material and here is my code:

<mat-grid-tile class="add-product-content" [rowspan]="4">
    <form [formGroup]="addProductGroup" class="form-add-product" (ngSubmit)="sendDataProduct()">
        <mat-accordion >
            <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" >
              <mat-expansion-panel-header>
                <mat-panel-title>Personal data</mat-panel-title>
              </mat-expansion-panel-header>
              <div class="input-container">
                  <div class="flex-item">
                      <mat-form-field>
                          <input matInput placeholder="First name">
                      </mat-form-field>
                  </div>
                  <div class="flex-item">
                      <mat-form-field>
                        <input matInput type="number" min="1" placeholder="Age">
                      </mat-form-field>
                  </div>
              </div>
              <mat-action-row>
                  <button mat-button color="primary" (click)="nextStep()">Next</button>
              </mat-action-row>
           </mat-expansion-panel>

           <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" >
              <mat-expansion-panel-header>
                  <mat-panel-title>Personal data</mat-panel-title>
              </mat-expansion-panel-header>

              <mat-form-field>
                  <input matInput placeholder="First name">
              </mat-form-field>
              <mat-form-field>
                  <input matInput type="number" min="1" placeholder="Age">
              </mat-form-field>
              <mat-action-row>
                  <button mat-button color="warn" (click)="prevStep()">Previous</button>
                  <button mat-button color="primary" (click)="nextStep()">Next</button>
              </mat-action-row>
          </mat-expansion-panel>
      </mat-accordion>
      <button mat-raised-button type="submit" class="actionButton">add</button>
    </form>
</mat-grid-tile>

Thanks.

Answer

On all of your mat-form-field, you will need to add a class which you can call what you want but I’ll call it full-width-field so, in the end, it will look like this.

HTML:

<mat-form-field class="full-width-field">
  <input matInput type="number" min="1" placeholder="Age">
</mat-form-field>

CSS:

.full-width-field {
   width: 100%;
}

Example take from Angular Material Docs

Advertisement

Answer