angular material input p g text cut

Question

I have an Angular material project and I use reactive web forms. In that project I have a couple mat-form-fields with input formControls (matInput). I have seen that text with p g j etc are cut off.

Any solution for this?

Answer 1

You can fix this by tweaking the input line height in the inputs in your theme.

Example:

$custom-typography: mat-typography-config(
    $font-family: 'apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    $input: mat-typography-level(inherit, 1.15, 400)
);

Check out https://material.angular.io/guide/typography for details.

Answer 2

This could be solved by adding this in your css:

::ng-deep .mat-form-field .mat-form-field-subscript-wrapper {
  overflow: visible;
}

Answer 3

This fixed it for me:

.mat-form-field .mat-form-field-label-wrapper label {
  line-height: 17px;
}

.mat-form-field .mat-form-field-infix input {
  line-height: 17px;
}