How can I change height in mat-form-field with appearance="outline" to a specific height pixel number, 40px (or any required number from UX team in the future). I need to reduce the mat-form-field.
How can this be done? What is the equation, or which part number can be modified to change to 40px?
-1.1? .75 , 133%, Looking for some kind of function or math equation using answer below, or any other option which may work.
https://stackoverflow.com/a/54762506/12425844
::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%;
}
Not sure exactly from where you want to cut, so I'll give you a few options and you can decide what and how much you want to cut in order to get the right size
To remove the margins from top and bottom
::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
margin: 0;
}
To change the font size
mat-form-field {
font-size: 10px;
}
To remove the hint and errors (space in the bottom)
::ng-deep .mat-form-field-wrapper {
padding-bottom: 0;
}
::ng-deep .mat-form-field-subscript-wrapper {
display: none;
}
To change the padding (default is 1em for top and bottom)
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: .5em;
}
Note: if you choose to do the last one you will also have to change the top or margin-top of the .mat-form-field-label like this
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label {
top: ...;
margin-top: ...;
}
you can add panelClass tp your mat-form-field like below:
your component.html:
<mat-form-field panelClass="example-class"></mat-form-field>
and style it in global css file
styles.scss:
.example-class{
height:40px
}
You can check it out here, on your project dependencies (@angular/material 8.2.3): node_modules\@angular\material\_theming.scss
Line ~ 4540 : @mixin _mat-form-field-outline-label-floating and mat-form-field-outline-typography :
// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-outline-dedupe: 0;
// Applies a floating label above the form field control itself.
@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
scale($font-scale);
width: 100% / $font-scale + $mat-form-field-outline-dedupe;
$mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
}
@mixin mat-form-field-outline-typography($config) {
// The unit-less line-height from the font config.
$line-height: mat-line-height($config, input);
// The amount to scale the font for the floating label and subscript.
$subscript-font-scale: 0.75;
// The padding above and below the infix.
$infix-padding: 1em;
// The margin applied to the form-field-infix to reserve space for the floating label.
$infix-margin-top: 1em * $line-height * $subscript-font-scale;
// The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
// Mocks show half of the text size, but this margin is applied to an element with the subscript
// text font size, so we need to divide by the scale factor to make it half of the original text
// size.
$subscript-margin-top: 0.5em / $subscript-font-scale;
// The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
// absolutely positioned. This is a combination of the subscript's margin and line-height, but we
// need to multiply by the subscript font scale factor since the wrapper has a larger font size.
$wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
// The amount we offset the label from the input text in the outline appearance.
$outline-appearance-label-offset: -0.25em;
.mat-form-field-appearance-outline {
.mat-form-field-infix {
padding: $infix-padding 0 $infix-padding 0;
}
.mat-form-field-label {
top: $infix-margin-top + $infix-padding;
margin-top: $outline-appearance-label-offset;
}
&.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
@include _mat-form-field-outline-label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
}
// Server-side rendered matInput with a label attribute but label not shown
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label {
@include _mat-form-field-outline-label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
}
}
}
}
I got you bro, Some easy Resolution is:
add this on your css
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
}
exaplained
Here you can control your mat-form-field height as you want.
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
And with this bellow you can control your mat-form-field placeholder padding to match with the new height that you put.
::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
}
I tried here and work fine
