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.

My input example

Alkalify

in css: input.mat-input-element {height:105px} - is this what you mean ? – Cockpit

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. – Alkalify

can you provide a picture of what you wanted to achieve – Bellyache

added picture... – Alkalify

another related question here, #59977579 – Oatcake

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

Cockpit

I added this to my code ,its change the place holder behavior. – Alkalify

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 – Cockpit

@StackOverflow: I added the transition effect also, you can play around with the values to get the exact effect you're aiming for – Cockpit

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? – Monotonous

@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. – Cockpit

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? – Monotonous

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/… – Cockpit

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 :) – Transduction

stackblitz was not working, placing question here, thanks #59977579 – Oatcake

::ng-deep is deprecated. – Felic

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 – Yasmeen

This answer needs update for Angular Material 15. The styles of form-fields has change. – Spinach

Answer 2

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://mcmap.net/q/180267/-how-to-change-height-in-mat-form-field

---

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="[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!

Bumptious

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. – Street

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. – Bumptious

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. – Street

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. – Bumptious

This is the best answer! Worked like a charm. Thanks! – Richthofen

Thanks ! very fast solution – Owlet

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 – Dingess

This method doesn't work on Angular 15! – Dihedron

This doesn't seem to work on Angular 14 either. I had to use Akber Iqbal's answer. – Garnes

The question was about the size of the control, not about the fontsize. – Collop

@Collop 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. – Bumptious

Answer 3

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.

Mulford

Should definitely be the solved answer. Thanks – Emigration

This should be the correct answer as this is the best and easiest way – Hollow

This is the correct way to adjust it. – Miculek

Answer 4

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.

Street

do you know answer to this? #59977579 – Oatcake

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. – Street

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. – Marlow

@Marlow what are you talking about? material.angular.io/components/form-field/overview, the label floating up is part of the specs. Its not about the label here, its about the height of the field. – Street

Answer 5

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
}

Loree

12px? that just not good practice.. wont be that readable on mobile :P – Wintertide

Answer 6

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

Spies

Answer 7

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

Phosphorate

Answer 8

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

Diaphysis

Answer 9

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

Cycloplegia

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 – Debauchee

Answer 10

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

Ytterbium

Answer 11

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:

Edsel

Answer 12

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

Pendergast

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://mcmap.net/q/73546/-should-i-use-px-or-rem-value-units-in-my-css-closed developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/… – Cathouse

Answer 13

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

Seismoscope

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

Answer 14

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. */
}

Rapt

Answer 15

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

Kylix

Answer 16

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

Justiceship

Answer 17

This worked for me:

transform: translateY(0) scale(.75);

applied this with ::ng-deep like:

.api-key-input {
  border-radius: 4px;
  background-color: white;
  flex-direction: row;
  width: 5rem !important;
  ::ng-deep {
    transform: translateY(0) scale(0.65);
    .mat-mdc-form-field-subscript-wrapper {
      width: unset !important;
    }
    .mat-form-field-label-wrapper {
      top: -0.5em;
    }
  }

changed from this:

and when clicked the label and input went up missing

to this:

the size without the the adjustments was the size of the black row.

good luck

Rufena

Answer 18

Just overwrite the default css variables:

Add this css to your global styles file:

mat-form-field.small {
  --mat-form-field-container-height: 40px;
  --mat-form-field-container-vertical-padding: 8px;
}

And apply the class small to the form field of you choice 😉

<mat-form-field class="small" appearance="outline">
  <mat-label>Search</mat-label>
  <input matInput type="text">
  <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

Before

After 🎉

Lordinwaiting

Answer 19

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

Caseation

Sizing in Material library is em(rem) based. Better not mix and match. – Spies

Mix and match what? Use px when you always want the same size. Use (r)em when you want it relative. – Caseation

Answer 20

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>

Demonstrative

Answer 21

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>

Bathsheb

Answer 22

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

Nemato

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. – Lyrism

Answer 23

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

Dulin

Answer 24

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>

Hammerless

Answer 25

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

Linea

Answer 26

For angular material 16.2, this worked for me

We can add following in css file or scss file to customize the height of mat-form-filed :

::ng-deep .mdc-notched-outline {
    height: 84% !important;
}

::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
    top: 50% !important;
    font-size: 14px !important;
}

::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
    padding-top: 11px;
    padding-bottom: 0px;
    font-size: 14px !important;
}

::ng-deep .mat-mdc-option .mdc-list-item__primary-text {
    font-size: 14px !important;
}

Speaker

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Iou

Answer 27

This worked for me:

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

Hegemony