css Question posted in
Some basic documentation can be found here.

Css – Reduce the Mat Form Field Height in Angaular Material 17

We recently upgraded our angular Project from 13 to 17 and also we upgraded Angular Material to 17. But after migration Materiel 17 (MDC), we are unable to reduce the form field height.
Any help is is much appreciated.
Angular Material 13
enter image description here

Angular Material 17
enter image description here

Tags:

2

Answers


  1. 0

    To get rid of the padding at the bottom, you can use subscript sizing "dynamic". You can set this for the whole app via the MAT_FORM_FIELD_DEFAULT_OPTIONS injection token.

    Also you can adjust the density of the form fields, which will decrease their height. To do this for the whole app, add the following SCSS code:

    @use "@angular/material" as mat;

:root {
  @include mat.form-field-density(-4);
}

    For more information see the theming docs.

    Login or Signup to reply.
  2. 0

    The only predefined height in the material form field is the line-height.

    You can change this height with a css variable called --mat-form-field-container-text-line-height.

    mat-form-field.custom-line-height {
  --mat-form-field-container-text-line-height: 40px;
}

    Check a StackBlitz with a working example here.

    Note: A lot of the "new" Material MDC components can/should be configured with css variables. Those can be easily found when you inspect the material element in your developer tools in your browser.
    For examplethis form field has following properties in css:

    .mat-mdc-form-field {
    --mat-mdc-form-field-floating-label-scale: 0.75;
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(--mat-form-field-container-text-font);
    line-height: var(--mat-form-field-container-text-line-height);
    font-size: var(--mat-form-field-container-text-size);
    letter-spacing: var(--mat-form-field-container-text-tracking);
    font-weight: var(--mat-form-field-container-text-weight);
}

    You see that many of those are defined with variables and can be easily overwritten with your own custom values the same way as I demonstrated with the line-height in the example above.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search