How to change height in mat-form-field

Stack Overflow picture Stack Overflow · Feb 19, 2019 · Viewed 45.3k times · Source

How can I change height in mat-form-field with appearance="outline"?

I need to reduce the mat-form-field.

My input example

enter image description here

Answer

Peter Nixey picture Peter Nixey · Jan 22, 2020

TLDR: adjust the font-size of the surrounding container.

Longer: The functionality for resizing the form-fields is built into Angular Material so unless you want to change relative proportions in the field, you don't need to get muddy with resizing individual components (see documentation).

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.

With container font-size: 12px;

<div style="font-size: 12px">
  
  <mat-form-field appearance="outline">
    <mat-label>Your name</mat-label>
    <input matInput placeholder="Jane Doe">
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>Your email</mat-label>
    <input matInput placeholder="[email protected]">
  </mat-form-field>

</div>

Resultant form:

enter image description here

With container font-size: 18px;

<div style="font-size: 18px">
  
  <mat-form-field...

</div>

Resultant form:

enter image description here

NB

This isn't a solution for you if you're not happy with the default padding of the material forms. However that's a different question to how you simply resize the forms. Resizing is simple, altering padding etc. is more hairy!