Angular Material "Form-Field" with appearance="outline" is cut off from other labels

Question

After updating to Angular Material v15 our form fields look like this (sometimes - depending on if there is a margin/padding from the element above):

This is how it looked like before:

From what I can see (and what they also write in the documentation) they changed the margins. Compare (new version):

vs previous version:

Also to proof that it's not only in our application I prepared a stackblitz sample that shows this behavior as well, see: Stackblitz example

I have fixed the label being "cut off" by adding a padding-top: 8px to all mat-form-fields. However, this feels like a workaround. Is there any better solution for this?

Inexpedient

Happens in my angular app after upgrading angular to v14 (from v9). Looks like they added some box-sizing stuff but I didn't manage to fix it yet. – Chase

Answer 1

I got a better solution, in my case I am working with a <mat-grid-tile> and to resolve the issue I've just setted overflow: visible on the mat-grid-tile.
I'm getting an error trying to build the Stackblitz example that you shared but I guess that in your case you should add the overflow property on the <mat-form-field> container ; )

Brimstone

I updated the Stackblitz link - Angular Material removed the appearance="standard" property, so I changed it to outline. it is only working on Chrome for me however. Using your suggested overflow: visible on the mat-form-field does not fix the problem for me – Inexpedient

No dude, you should set the property to the <mat-form-field> CONTAINER. I've just updated the Stackblitz link ; ) => stackblitz.com/edit/… I've just added the following code on the style sheet: ::ng-deep .mat-vertical-stepper-content { overflow: visible !important; } (as you can see I worked on the container, the stepper) – Brimstone

Ah yeah I get it, but this does not solve it for the mat-form-fields for the whole application. Depending on how the form field is integrated I'd need to set overflow on a different container – Inexpedient

Yeah I know, it's really annoying but at the moment it's the only solution I've found.. : ( At this point i suggest you to work on the container's padding if not on the overflow, nothing else to do – Brimstone

Answer 2

.mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
    overflow: visible;
}

this fixed the issue for me, it was cutting the last letter of the label

Touber