Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 589
Adnane Lamghari Avatar asked Jun 21 '18 23:06

Adnane Lamghari


People also ask

How can I increase my mat form field size?

The key to adjusting the field size is actually just adjusting the font-size in the surrounding container. Once you do that, everything else will scale with it. e.g.

What is matSuffix?

The matSuffix is a configuration directive for the material input field, that will ensure that the calendar icon is added at the end (to the right) of the input field.

What is MatFormFieldControl?

MatFormFieldControl. An interface which allows a control to work inside of a MatFormField .

How do you remove a border from a mat field?

Try border-style: none . – N.F.


1 Answers

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

like image 60
Skel Avatar answered Oct 30 '22 13:10

Skel