How to Change Height in Mat-Form-Field

How to change height in mat-form-field

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

Angular 8: Change Height in Mat-form-field to Specific pixel number

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

How shall I adjust the size of mat-form-field mat-chip?

You can override the styles from angular/material.

In this case, it is enough to simply add the same property in a style rule in your component's CSS file. Your component CSS has higher specificity than the mat-chip rules below.

The height of the chip is determined by the following rule:

.mat-standard-chip {
   min-height: 32px;
}

So you could override this to make the chip smaller.

You may also want to modify the font-size with the following rule:

.mat-chip {
   font-size: 14px;
}

---

Related Topics