How to change height in mat-form-field
JavascriptCssAngularTypescriptAngular MaterialJavascript Problem Overview
How can I change height in mat-form-field with appearance="outline"?
I need to reduce the mat-form-field.
Javascript Solutions
Solution 1 - Javascript
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 2 - Javascript
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 3 - Javascript
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 - Javascript
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 - Javascript
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).
Solution 6 - Javascript
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;
}
}
Solution 7 - Javascript
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;}
Solution 8 - Javascript
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. */
}
Solution 9 - Javascript
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
Solution 10 - Javascript
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:
Solution 11 - Javascript
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;
}
}
}
}
}
Solution 12 - Javascript
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;
}
Solution 13 - Javascript
Apply the change to the selector .mat-form-field .mat-form-field-infix. In Sass it would be:
.mat-form-field {
.mat-form-field-infix {
height: 16px;
}
}
Solution 14 - Javascript
This worked for me:
::ng-deep .mat-form-field-infix {
height: 25px;
font-size: 12px;
}