How to reduce the height of the MCD based angular material input components with "outlined" appearance (>= Angular 15)

Question

The MDC (https://github.com/material-components/material-components-web) based input components in angular material (https://material.angular.io/) take up a lot of space above and below.

I tried to reduce the theme desinsity to -2 but nevertheless, the height of the inputs is too much.... But even so padding-top is 12px, padding-bottom is 12px.

If I naively try to overwrite the padding (and so on) in the CSS classes, it always has an effect so that various inputs no longer look correct (e.g. textarea, date input, autocomplete)

How to change this consistently across the different input types and reduce the space?

Answer 1

if your matInput is included in a mat-grid-list you can use this class:

/* low-list-row is a class created to reduce a mat-grid-list form density:
/* Pay attention: it removes the mat-hint*/
::ng-deep ._low-list-row .mat-form-field-subscript-wrapper {
    visibility: hidden !important;
}

::ng-deep ._low-list-row .mat-form-field-wrapper {
    padding-bottom: 0px !important;
}

::ng-deep ._low-list-row .mat-form-field-underline {
    bottom: 0.25em !important;
}

::ng-deep ._low-list-row .mat-grid-tile {
    height: 50px !important;
}

::ng-deep ._low-list-row {
    height: 50px !important;
}

It uses the ::ng-deep method that is deprecated but I don't know other methods

if it's not included in a grid-list you can take advantage of part of it