How to change height in mat-form-field

css angular typescript angular-material mat-input

96,755

Solution 1

Add these to your CSS in the your original stackblitz

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

UPDATED: with transition for the label...

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

Solution 2

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:

With container font-size: 18px;

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

</div>

Resultant form:

NB

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

Solution 3

Using @AkberIqbal's solution messed up my styling for mat-form-fields that where not outline. Also this solution does not need any !important;. With !important; you're already lost :D.

So here is a safe way to add to your global styles: (seems overkill, but I rather be save than sorry)

mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  { padding: 0.4em 0px }
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; }

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

So as you can see. I "hunt" down every class until I have found a outline! I like outline styling to only be applied to outline-fields.

Solution 4

TL;DR Material form fields are based on font-size property of the field.

Don't make the mistake of adjusting material heights, paddling, etc... in your CSS/SCSS... Material Form elements such as input and selects are based on font-size. Also, inline styles are not advised, so you can simply add some CSS. The `appearance attribute is irrelevant.

::ng-deep .mat-form-field {
    font-size: 12px; // example
}

Solution 5

In case someone wants to make Akber Iqbal's answer class-based(to have both sizes available):

:host ::ng-deep {
  .my-custom-component-small { // add my-custom-component-small class to your mat-form-field element
    .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;}
    .mat-form-field-label-wrapper { top: -1.5em; }

    &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
      transform: translateY(-1.1em) scale(.75);
      width: 133.33333%;
    }
  }
}

Hopefully, the Angular team adds support for high-density UI in future releases(high-density is part of material design specifications).

View more solutions

96,755

Author by

Stack Overflow

Updated on July 05, 2022

Comments

Stack Overflow almost 2 years

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

I need to reduce the mat-form-field.

My input example
Stack Overflow about 5 years

I added this to my code ,its change the place holder behavior.
Akber Iqbal about 5 years

That is intentional, due to the third CSS statement in my answer, remove or play around with the value in the 3rd CSS statement to see effects
Akber Iqbal about 5 years

@StackOverflow: I added the transition effect also, you can play around with the values to get the exact effect you're aiming for
rainversion_3 almost 5 years

Thanks for the stackblitz code .. This is helpful to remove extra padding. How can I make sure that mat-form-field height is something like 36px?
Akber Iqbal almost 5 years

@rainversion_3, add this to css ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick{ height: 36px; } ::ng-deep .mat-form-field-flex > .mat-form-field-infix { border-top: 5px solid transparent; } ... let me know if it works for you.
rainversion_3 almost 5 years

The height changes when I hover and focus else it is default height. How do you find which class and property to be modified? Is there any documentation for it?
Akber Iqbal almost 5 years

the height is fixed to 36px regardless of not touching it, focusing it or hovering over it... you can check the working demo: stackblitz.com/edit/…
Whisher over 4 years

In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep :) thanks @akber its work like a charme :)
Wildhammer over 4 years

Sizing in Material library is em(rem) based. Better not mix and match.
Russ over 4 years

Mix and match what? Use px when you always want the same size. Use (r)em when you want it relative.
Admin over 4 years

do you know answer to this? stackoverflow.com/questions/59977079/…
Admin over 4 years

stackblitz was not working, placing question here, thanks stackoverflow.com/questions/59977079/…
Andre Elrico over 4 years

I have no clue what the "formula" is. I copied the values from the top answer. You could read the github source to maybe find clues.
Andre Elrico over 4 years

this question is not about resizing in respect to font-size. Its about the relationship of distance from text/label to the borders, which is for some taste to wide.
Peter Nixey over 4 years

Andre the question was how to change the height of the form field and this answers that: the height of all of the elements of the form are defined relative to the font size so that’s all you need to alter. You are right that it won’t alter relative proportions - it will keep everything proportional and scale all of it. but changing the proportions wasn’t the question. Your question is a different one than the OPs.
Andre Elrico over 4 years

Please assess the marked answer (It changes proportions, and OP is happy with it and marks it as anwser). And look closely at the images of the OP. The images show that the proportions should change. Have a nice weekend.
Peter Nixey over 4 years

For some reason the original images didn't load when I was looking at the question and so only the text was visible. With the images it's clear that you're right in your interpretation.
Ross Brasseaux over 3 years

::ng-deep is deprecated.
Mackelito over 3 years

12px? that just not good practice.. wont be that readable on mobile :P
Pranav Bhatia over 3 years

This is the best answer! Worked like a charm. Thanks!
Muhammad Awais about 3 years

move your styling to styles.scss file to make it global because most probably you will need same styles for your all fields all over the app, dont' forget to remove ::ng-deep when you move it to styles.scss file it is not required there
Pedro Bezanilla almost 3 years

Thanks ! very fast solution
coppereyecat over 2 years

I tried this code and it worked for the input fields but not the labels (in my mat-autocomplete inputs). Renaming from small-input to compact-input I ended up using this selector to position the label on the empty object: .compact-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-form-field-label-wrapper .mat-form-field-label.mat-empty.mat-form-field-empty { margin-top: -0.75em; }
WasiF about 2 years

Your answer does not fulfill the requirement with attribute appearance="outline", when you click on field, label goes up and hide. Please re-test and update your solution.
Serene Abraham Mathew about 2 years

We can further reduce the height of input by setting line-height:1 to mat-form-field. The default line-height of mat-form-field is 1.125
chitgoks about 2 years

the outline text is placed correctly but when the text is inside the input field, it is drawn a bit lower which is not verically aligned