Menu
I create a registration form as part of my learning Angular and Nodejs. My form looks wide and it is ok, however the fields on this form looks narrow or thin. I tried to set Width:100% direct to the container tag but didn't work.
How to set width:100% for all these fields using a css tag?
My form using angular:
<mat-card> <mat-card-header> <mat-card-title> <h4>Register New User</h4> </mat-card-title> </mat-card-header> <mat-card-content class="register-container"> <form> <mat-form-field> <input matInput placeholder="E-mail" ng-model="data.email" type="email"> </mat-form-field> <br /> <mat-form-field> <input matInput placeholder="Password" ng-model="data.pwd" type="password"> </mat-form-field> <br> <mat-form-field> <input matInput placeholder="Name" ng-model="data.name" type="text"> </mat-form-field> <br> <mat-form-field> <textarea matInput ng-model="data.description" placeholder="Leave a comment"></textarea> </mat-form-field> </form> </mat-card-content> </mat-card>
404
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.
Turn off encapsulation of your component inside which you change the padding. You can add these css in global stylesheet without turning off view encapsulation.
The <mat-form-field> is a component that is used to wrap multiple MAT components and implement common text field styles of the form-field such as hint message, underlines, and floating label. These five MAT components are designed to work inside the form-field: <mat-chip-list>
This works just fine.
mat-form-field { width: 100%; } Live demo
154
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
