Set width on input mat-form-fields for angular material

Question

I am so very new to Angular, and I am trying to create a form with longer-than-default input fields. This is my current code:

person.component.html

<form class="new-person-form">     <mat-card>         <mat-form-field>             <input matInput placeholder="Name">         </mat-form-field>         <mat-form-field>             <input matInput placeholder="Birthday">         </mat-form-field>         <mat-checkbox>Active</mat-checkbox>     </mat-card> </form> 

person.component.css

.mat-form-field {     padding: 10px; }  .mat-checkbox {     padding: 10px; } 

person.component.html

<form class="new-person-form">     <mat-card fxLayout="row">         <mat-form-field>             <input matInput placeholder="Name" fxFlex="50">         </mat-form-field>         <mat-form-field>             <input matInput placeholder="Birthday" fxFlex="25">         </mat-form-field>         <mat-checkbox fxFlex="25">Active</mat-checkbox>     </mat-card> </form> 

person.component.css

.mat-form-field {     padding: 10px; }  .mat-checkbox {     padding: 10px; } 

And this is the result:

|                                                                          | |   Name___________  Birthday_______  [] Active                            | |                                                                          | 

I'm trying to lengthen Name to be about 50% of the page, so something like this:

|                                                                          | |   Name___________________________  Birthday_______  [] Active            | |                                                                          | 

I'm not super great at CSS, so I think FlexLayout might be what I need, but so far I can't get it to work correctly.

Answer 1

This will change the width of matform field

<mat-form-field [style.width.px]=327>   <input matInput placeholder="Template Name" value="{{templateName}}"> </mat-form-field> 

Answer 2

The following will make the field 50% of the Viewport Width by using style="width:50vw"

<mat-form-field style="width:50vw" ...>    ... </mat-form-field>