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.

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. — kroe761, May 20 '19 at 18:17

score 52 · Answer 1 · answered Jan 11 '20 at 10:56

52

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>

answered Jan 11 '20 at 10:56

Shubham Dixit

9,242
4
27
46

In addition to changing of width, is there a way I can change the height too? – Dwayne Apr 06 '20 at 22:03
2

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 `) to get different effects, but maybe you just want to set different font metrics? try setting `line-height`. – Guss Jul 20 '21 at 09:11
It works fine with angular material 10, is there a way to put this in a .scss so I can use it from any form? let's say some like class="comments" – OJVM Aug 26 '22 at 15:05
1

and for percents, `style.width.%` – O-9 Sep 29 '22 at 08:58

score 13 · Answer 2 · answered May 20 '19 at 21:05

13

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>

answered May 20 '19 at 21:05

Marshal

10,499
2
34
53

score 5 · Answer 3 · answered Sep 25 '20 at 03:33

5

you can use that css tricks


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

answered Sep 25 '20 at 03:33

Jessy Ndaya

185
3
4

score 3 · Answer 4 · edited Aug 24 '21 at 20:14

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.

Saksham · Answer 5 · 2019-05-20T18:32:11.413

1

Forcing the styles should do the trick as

.mat-input-wrapper{
  width:400px !important;
}

OR

<mat-form-field style="width:400px !important" ...>
   ...
</mat-form-field>

Try adding a class if you want to handle not all the input fields on the page.

edited May 20 '19 at 18:32

answered May 20 '19 at 18:11

Saksham

9,037
7
45
73

score 1 · Answer 6 · answered Sep 04 '21 at 06:35

1

Some of the other answers have already sort of suggested this, but the key for me was to set the width on the mat-form-field instead of on the input element. When I tried to set the input element's width property (or use CSS width on the input element) it had no effect at all.

answered Sep 04 '21 at 06:35

EJoshuaS - Stand with Ukraine

11,977
56
49
78

input width only has effect if (only for type="image") https://www.w3schools.com/tags/att_input_width.asp – Vinay Somawat Jun 26 '23 at 03:35

score 1 · Answer 7 · answered Dec 21 '21 at 20:10

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;
}

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

7 Answers7