<mat-hint> and <mat-error> text gets cut off at the bottom

[ienzam]

What is the expected behavior?

We should be able to see the whole hint and error text.

What is the current behavior?

Hint and error text get cut off at the bottom.

What are the steps to reproduce?

https://angular-material-issue-hint-error-cut.stackblitz.io

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All of them I think.

Is there anything else we should know?

For outline,

[Rlcolli4]

We are having a similar problem in our application with text being verticaly cut off with our errors and hints.
We want to use the MatError in the MatFormField but, due to some design decisions out of my control, we have to shrink the form field to a specific size and as a result the errors and hints get cut off.
The reason we chose to shorten the MatFormField was due to multiple attempts to resize the width of the MatInput. Each attempt resulted in either the styling being ignored, or items like material select or material suffix behaving in unexpected ways (IE the suffix being cut off, the drop down error not showing up, etc).

[ayeletdn]

I have just come across this issue. Our design constraints are using a base font size of 14px and the font Barlow. We are incorporating the font using the recommended mat-core($custom-typography). I noticed that by changing either the font size (even by one pixel) or the font family (back to the original Roboto) reduces the problem, but that's not a realistic solution as it is a system-wide font.

I'm not sure why the original stackblitz doesn't seem to show the problem but I have recreated it on the latest angular 11.2 environment:
https://stackblitz.com/edit/angular-hint-charcters-truncated?file=src/styles.scss

Attaching screenshot for quick reference:

[Zackysh]

Same problem here:

I gave it a simple solution, just add a bit of margin.bottom, it results on:

[ricardoandradee]

I am facing the same issue, the message is cut off. Has anyone been able to solve this issue yet?

[jeroennijhuis]

So i was also running against the problem where my mat-hint would be cut off after two lines. But overwriting the MAT_FORM_FIELD_DEFAULT_OPTIONS seems to be my fix.
Adding the provider and setting the subscriptSizing to dynamic will no longer cut off any text.

{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } }