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.
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.
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.
MatFormFieldControl. An interface which allows a control to work inside of a MatFormField .
Try border-style: none . – N.F.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With