How to change height in mat-form-field

Question

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

I need to reduce the mat-form-field.

in css: `input.mat-input-element {height:105px}` - is this what you mean ? — Akber Iqbal, Feb 19 '19 at 07:06
this is what i mean, but i want to reduce the control and its just reduce the inner element and not the mat-form-field. — Stack Overflow, Feb 19 '19 at 07:47
another related question here, https://stackoverflow.com/questions/59977079/how-to-change-to-specific-height-in-mat-form-field-in-angular-8 — , Jan 30 '20 at 07:21

Peter Nixey · Answer 1 · 2023-07-05T18:32:40.297

127

Update - This doesn't appear to work post Angular 15

As of more recent versions of Angular (15+?) this doesn't seem to work any more - please refer to @Neistow's answer instead : https://stackoverflow.com/a/75194777/400790

Pre Angular 15

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="you@youremail.com">
  </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!

edited Jul 05 '23 at 18:32

answered Jan 22 '20 at 17:16

Peter Nixey

16,187
14
79
133

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. – Andre Elrico Jan 30 '20 at 11:11
4

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. – Peter Nixey Jan 31 '20 at 14:35
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. – Andre Elrico Jan 31 '20 at 15:44
1

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. – Peter Nixey Feb 01 '20 at 17:32
1

This is the best answer! Worked like a charm. Thanks! – Pranav Bhatia Dec 03 '20 at 14:48
Thanks ! very fast solution – Pedro Bezanilla Jul 07 '21 at 14:04
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 – Serene Abraham Mathew Apr 03 '22 at 06:25
11

This method doesn't work on Angular 15! – Shadoweb Dec 22 '22 at 11:59
This doesn't seem to work on Angular 14 either. I had to use Akber Iqbal's answer. – nedstark179 Mar 30 '23 at 17:18
The question was about the size of the control, not about the fontsize. – Edwin Jun 28 '23 at 08:14
@Edwin if you'll re-read the answer you'll see that the whole control is (or at least was) based on the font-size. So changing the font size changes the size of everything. – Peter Nixey Jun 29 '23 at 09:11

Akber Iqbal · Accepted Answer · 2019-02-19T09:45:41.557

86

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

edited Feb 19 '19 at 09:45

answered Feb 19 '19 at 09:12

Akber Iqbal

14,487
12
48
70

I added this to my code ,its change the place holder behavior. – Stack Overflow Feb 19 '19 at 09:23
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 Feb 19 '19 at 09:27
@StackOverflow: I added the transition effect also, you can play around with the values to get the exact effect you're aiming for – Akber Iqbal Feb 19 '19 at 09:47
1

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`? – rainversion_3 Jun 18 '19 at 13:53
@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. – Akber Iqbal Jun 19 '19 at 04:32
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? – rainversion_3 Jun 19 '19 at 08:03
the height is fixed to 36px regardless of not touching it, focusing it or hovering over it... you can check the working demo: https://stackblitz.com/edit/mat-input-mat-error-mat-form-field-a6ar69?file=app/input-overview-example.css – Akber Iqbal Jun 19 '19 at 09:03
1

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 :) – Whisher Nov 25 '19 at 16:28
stackblitz was not working, placing question here, thanks https://stackoverflow.com/questions/59977079/how-to-change-to-specific-height-in-mat-form-field-in-angular-8 – Jan 30 '20 at 07:22
::ng-deep is [deprecated](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). – Ross Brasseaux Aug 15 '20 at 18:33
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 – Muhammad Awais Feb 09 '21 at 10:30
This answer needs update for Angular Material 15. The styles of form-fields has change. – Julien Nov 25 '22 at 14:12

score 40 · Answer 3 · answered Jan 21 '23 at 16:19

40

Angular Material 15+ update

Starting from material v15 component density was added, allowing safe customization without any ::ng-deep and styles overriding fuss.

Here is an example from docs:

// You can set a density setting in your theme to apply to all components.
$dark-theme: mat.define-dark-theme((
  color: ...,
  typography: ...,
  density: -2, // default is 0
));

// Or you can selectively apply the Sass mixin to affect only specific parts of your application.
.the-dense-zone {
  @include mat.button-density(-1);
}

Here is a stackblitz, that demonstrates mat-form-field density.

answered Jan 21 '23 at 16:19

Neistow

806
1
8
20

6

Should definitely be the solved answer. Thanks – Rapido Feb 17 '23 at 09:57
2

This should be the correct answer as this is the best and easiest way – Ashutosh Ranjan Jha May 24 '23 at 17:52

score 26 · Answer 4 · edited Dec 12 '19 at 13:02

26

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.

edited Dec 12 '19 at 13:02

Jacques

6,936
8
43
102

answered May 23 '19 at 16:16

Andre Elrico

10,956
6
50
69

do you know answer to this? https://stackoverflow.com/questions/59977079/how-to-change-to-specific-height-in-mat-form-field-in-angular-8 – Jan 30 '20 at 07:22
1

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 Jan 30 '20 at 11:09
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. – WasiF Mar 01 '22 at 05:04

score 8 · Answer 5 · answered Jul 26 '20 at 16:56

8

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
}

answered Jul 26 '20 at 16:56

Joshua Michael Calafell

2,945
34
47

2

12px? that just not good practice.. wont be that readable on mobile :P – Mackelito Dec 02 '20 at 20:24

score 5 · Answer 6 · answered Nov 26 '19 at 18:45

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).

score 3 · Answer 7 · answered Jun 02 '21 at 07:50

As many post people has explained, Material angular form-field are based on font-size, so for all of you who want to define a custom form-field, here is my code to resize both height and width without affecting input font or icon toggle size.

Define inside the component css this code and apply them as a class to the mat-form-field label.

.custom-form-field {
  width: 200px;
  font-size: 10px;
  margin-top: 3px;
  margin-bottom: -1.25em;

  mat-datepicker-toggle {
      font-size: 12px;
  }

  input.mat-input-element {
      padding-bottom: 2px;
      font-size: 12px;
      color: $title-color;
  }
}

Faisal Mushtaq · Answer 8 · 2023-02-21T14:21:23.770

3

UPDATED

html

   <mat-form-field appearance="outline" style="height: 40px;">
            <input matInput >
   </mat-form-field>

CSS

::ng-deep .mat-mdc-text-field-wrapper {
    height: 40px !important;
}
::ng-deep .mat-mdc-form-field-flex {
    margin-top: -7px !important;
}

edited Feb 21 '23 at 14:21

answered Dec 19 '22 at 14:34

Faisal Mushtaq

485
4
11

score 2 · Answer 9 · answered Oct 07 '21 at 08:13

2

You can do deep ovveride the padding value of outline style:

    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .5em;
}

For me it was a good solution

answered Oct 07 '21 at 08:13

user1012506

2,048
1
26
45

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 – chitgoks Apr 08 '22 at 08:51

EliuX · Answer 10 · 2022-08-02T16:05:49.497

2

Apply the change to the selector .mat-form-field .mat-form-field-infix. In CSS it would be:

.mat-form-field .mat-form-field-infix {
   height: 16px;
}

edited Aug 02 '22 at 16:05

answered Oct 27 '21 at 15:41

EliuX

11,389
6
45
40

score 2 · Answer 11 · answered Nov 29 '21 at 07:16

If you are not using 'mat-label' inside 'mat-select', then the below css will work

::ng-deep {
    .mat-form-field-infix {
        border: 0px !important;
    }
    .mat-form-field-appearance-outline .mat-select-arrow-wrapper {
        transform: none !important;
    }
}

Before:

After:

score 1 · Answer 12 · answered Jun 07 '20 at 18:37

1

This is what I used:

.small-input.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .25em 0 .75em 0;
    font-size: 14px;
}
.small-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-select-arrow{margin-top: 10px;}
.small-input.mat-form-field-appearance-outline .mat-select-empty + .mat-form-field-label-wrapper .mat-form-field-label{margin-top: -0.75em;}

answered Jun 07 '20 at 18:37

user2717825

11
1

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; }` – coppereyecat Oct 12 '21 at 23:47

Ralph Furley · Answer 13 · 2020-06-10T01:43:32.803

Here's another approach:

/* Angular Material Overrides */
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: #ccc; /* Override outline color. */
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .65em 0; /* Original top/bottom value was 1em. */
}


.mat-input-element {
  position: relative;
  top:  -1.2em; /* Adjust accordingly to keep placeholder/input text vertically centered. */
}

.mat-form-field-label-wrapper {
  top: -1.2em; /* Adjust accordingly to keep <mat-label> text vertically centered. */
}

score 1 · Answer 14 · answered May 17 '21 at 08:52

This 'issue' of not being able to hide the floating label is mentioned here: https://github.com/angular/components/issues/11845

A nice work-around mentioned there is to not include a mat-label in your mat-form-field and add this to your css, either local or global. You may need use ::ng-deep.

.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
  border-top-width: 0;
}

score 1 · Answer 15 · answered Sep 28 '22 at 22:57

If anyone else facing the same issue, can set the height of mat-input by following this simple method Give a class to your input like

    <mat-form-field appearance="outline"  class="small-height-input">              
       <input matInput placeholder="Email">                    
    </mat-form-field>

Go inside your style.scss add this code

.small-height-input{
  max-height: 46px; 
  width: 300px;
  border-radius: 4px;
  font-size: 12px !important;// decrease the font size  to set height
  .mat-input-element{ 
    font-size: 16px !important;  //increase the size of input font
  }
}

score 1 · Answer 16 · edited Mar 27 '23 at 08:18

1

For angular material 15, this worked for me (style.scss) :

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.mat-mdc-form-field-infix {
  min-height: 13px !important;
}

Before	After

edited Mar 27 '23 at 08:18

moken

3,227
8
13
23

answered Mar 21 '23 at 07:11

Atikha Azmila

11
2

In the interest of allowing users to resize the page, I recommend the use of `em` or `rem` (page root - em based units) which = 16 px by default. https://stackoverflow.com/a/58809692/1020467 https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units – mcint Mar 26 '23 at 19:59

score 0 · Answer 17 · answered Oct 04 '19 at 21:53

Here is a recent solution of mine for a field that is 32px tall and allows for rounded corners.

  & .mat-form-field-wrapper {
    height: 44.85px;

    & .mat-form-field-flex {
      height: 32px;

      & .mat-form-field-outline {
        $borderRadius: 25px;
        height: 28px;

        & .mat-form-field-outline-start {
          border-radius: $borderRadius 0 0 $borderRadius;
          width: 13px !important; // Override Material in-line style
        }

        & .mat-form-field-outline-end {
          border-radius: 0 $borderRadius $borderRadius 0;
        }
      }

      & .mat-form-field-infix {
        left: 4px;
        padding: 0;
        top: -7px;

        & .mat-form-field-label,
        & .mat-input-element {
          font-size: 12px;
        }

        & .mat-form-field-label-wrapper {
          top: -1.04375em;

          & .mat-form-field-label {
            height: 16px;
          }
        }
      }
    }
  }

Sizing in Material library is em(rem) based. Better not mix and match. — Wildhammer, Nov 26 '19 at 00:12
Mix and match what? Use `px` when you always want the same size. Use (r)em when you want it relative. — Russ, Nov 26 '19 at 04:08

score 0 · Answer 18 · answered Aug 19 '22 at 20:17

Are you using flexbox? If you are using flexbox you might have this code.

code of React CSS in JS

<div style={{ display: "flex" }}>
    <div>
      <div>element1</div>
      <div>sdfsdfsf</div>
      <div>sdfsdfsf</div>
    </div>
    <input>element2</input>
    <input>element3</input>
  </div>

Probably the inputs that contain element2 and 'element3 values will resize in height, so to avoid it you need to wrap up into another div (so, the input takes the responsive relative dimensions of the wrapper that do not have flex ) like this code:

<div style={{ display: "flex" }}>
    <div>
      <div>sdfsdfsf</div>
      <div>sdfsdfsf</div>
      <div>sdfsdfsf</div>
    </div>

    <div>
      <input>element2</input>
    </div>
    <div>
      <input>element3</input>
    </div>
  </div>

score 0 · Answer 19 · answered Sep 08 '22 at 14:38

i found great soltion for your prolem. 'mat-form-field' is container, 'input' inside,so to change size of input you need to change container size, it will be size of input box,then change input size- its size of font which you use

<mat-form-field appearance="outline" style="font-size:3px;width: 70%">

<input style="font-size:15px" matInput placeholder="Placeholder">

</mat-form-field>

jiange · Answer 20 · 2022-12-14T09:39:08.823

0

Add this style

::ng-deep.mat-form-field-infix {
  border: 0;
  height: 45px;
}
::ng-deep.mat-form-field-appearance-outline .mat-form-field-label{
  top: 2.35em
}
mat-label{
  font-size: 13px;
}

edited Dec 14 '22 at 09:39

answered Dec 14 '22 at 09:34

jiange

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – turivishal Dec 18 '22 at 07:41

Kendo · Answer 21 · 2023-03-20T08:43:05.730

0

You can add that in css file or scss file to custom height for mat-form-filed :
Example : Fix to 32px

::ng-deep .mat-mdc-form-field-infix
{
    min-height: 32px !important;
}

From: 1 To: 2

edited Mar 20 '23 at 08:43

answered Mar 20 '23 at 08:34

Kendo

1
1

score 0 · Answer 22 · answered Mar 22 '23 at 14:15

you can add custom CSS to your component. The height of the mat-form-field can be adjusted by setting the height property of its container.

For example, if your mat-form-field is inside a div element with the class name "my-container", you can add the custom CSS by defining a new class in your component's CSS file:

.my-container .mat-form-field-outline {
   height: 60px;
}

Then, you can add the "my-container" class to the div element that contains the mat-form-field:

<div class="my-container">
   <mat-form-field appearance="outline">
      <!-- your form field content here -->
   </mat-form-field>
</div>

score 0 · Answer 23 · answered Aug 24 '23 at 09:29

Solution for:

"dependencies": {
    "@angular-eslint/builder": "^16.0.3",
    "@angular-eslint/schematics": "^16.0.3",
    "@angular/animations": "^16.0.0",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/material": "^15.2.9"
}

// style.scss

$height: 30px;
$font-size: 13px;
::ng-deep {
    .mat-mdc-text-field-wrapper.mdc-text-field {
        height: $height !important;
    }
    mat-label {
        font-size: $font-size;
    }
    .mat-mdc-text-field-wrapper
        .mat-mdc-form-field-flex
        .mat-mdc-floating-label {
        top: 13px;
    }
    .mat-mdc-text-field-wrapper.mdc-text-field--outlined
        .mat-mdc-form-field-infix {
        padding-top: 0;
        padding-bottom: 0;
        height: $height;
    }
    .mat-mdc-form-field-flex {
        height: $height;
    }
    .wrapper .table-title .filter .search-placeholder-icon {
        font-size: 18px;
        padding-top: 8px;
    }
    .mdc-floating-label--float-above {
        font-size: $font-size !important;
    }
    .mat-datepicker-input {
        padding-top: 3px !important;
        font-size: $font-size !important;
    }
}

score -1 · Answer 24 · answered Feb 24 '22 at 10:06

-1

This worked for me:

::ng-deep .mat-form-field-infix {
    height: 25px;
    font-size: 12px;
}

answered Feb 24 '22 at 10:06

rahulbhondave

186
2
9