Angular Material floating labels disappearing or getting cut off on hover

I don't want to have to disable floating labels if I don't have to, but they're not behaving well for me. When I hover over them, a lot of the time the floating label will either disappear completely, the bottom half will get cut off, or (more rarely) the top half will get cut off. I've tried adjusting the z-index and overflow visibility on various elements within the mat-form-field, to no success.



Unfortunately I haven't even been able to recreate the issue exactly on StackBlitz. I can reproduce the one where the top of the label gets cut off if there's no top padding between the element above and the form field, but as you can see below there is sufficient top padding where this shouldn't be an issue. Also since the label gets cut off at the bottom or disappears altogether, I'm not sure that parent element padding is the issue.



Not sure this is helpful since it's just a standard mat-form-field, but here's the code:

<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>Data Source</mat-label>

<mat-select [(value)]="source">
<mat-option [value]="option" *ngFor="let option of sources">
{{ option.label }}
</mat-option>
</mat-select>
</mat-form-field>


There is no additional styling on the form field itself. The form field's parent div applies a grid layout to its children, but this problem also occurs on another component where the form field is within a flex layout as well.

Continue reading...