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.

Solution 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>

Solution 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>

Solution 3

you can use that css tricks

.mat-form-field{
   width:350px !important;
}

Solution 4

Using fxLayout you can create a flexbox. For making each element in flexbox to consume full row you should use fxFlexFill. For making an element consuming the remaining space you can use fxFlex.

You can also use fxLayoutGap instead of padding in styles. Also if you want the elements to go to the next line when there is no more space you can use fxLayout="row wrap".

Here are some samples of what you were looking for:

    <form class="new-person-form">
        <h3>full Rows:</h3>
        <mat-card fxLayout="row wrap">
            <mat-form-field fxFlexFill>
                <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field fxFlexFill>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-25-25:(checkbox consumes same space as Birthday)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex="25">
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-remaining-required:(Birthday consumes remaining space)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex>
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox>Active</mat-checkbox>
      </mat-card>
    </form>

I've also created a working example in stack blitz.

Solution 5

Add a class mat-form-field in order to decrease width of mat-input

<mat-form-field class="reduce-width">
   <mat-label>Label</mat-label>
     <input required matInput type="text"[formControl]="controlName">
</mat-form-field>

.reduce-width {
  width: 256px;
  margin-left: 17px;
}

View more solutions

Comments

[asimhashmi]

Did you try the size attribute?

[Saksham]

by longer you mean visually longer?

[kroe761]

Yes, visually. I like the idea of flexlayout, but I can't seem to get it to work. I'd love to be able to just set a field to take up a certain percentage of the screen and let that be that.

[Dwayne]

In addition to changing of width, is there a way I can change the height too?

[Guss]

Depending on what you want to achieve - you can set the style.height attribute like above and this will give more room at the bottom for the field "hint" text, but won't change the field itself. you can try to assign height to different contained elements (such as <input>) to get different effects, but maybe you just want to set different font metrics? try setting line-height.