bug(form-field): matTextSuffix/matTextPrefix not vertically aligned with label

[mohammedsahl]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The label of a mat-form-field is not vertically aligned with the matTextSuffix or matTextPrefix.

Notice how the suffix and prefix are a couple or so pixels above the label

Reproduction

StackBlitz link: https://stackblitz.com/edit/t9161j?file=src%2Fexample%2Fform-field-prefix-suffix-example.html

Expected Behavior

Label to be vertically aligned with both matTextSuffix and matTextPrefix

Actual Behavior

Label is not vertically aligned with both matTextSuffix and matTextPrefix

Environment

• Angular: 16
• CDK/Material: ^16.2.7
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[mohammedsahl]

It looks like you're using Angular Material's mat-form-field with matTextSuffix and matTextPrefix, and you're facing an issue with the vertical alignment of the label.

To vertically align the label with the matTextSuffix and matTextPrefix, you can apply some custom styles. Here's an example of how you might adjust the styles to achieve better alignment: /* In your component's styles or global styles.css / .example-container { display: flex; gap: 16px; / Adjust the gap according to your layout */ }

.mat-form-field { display: flex; flex-direction: column; align-items: baseline; }

.mat-form-field-wrapper { display: flex; align-items: baseline; }

.mat-form-field-label-wrapper { display: flex; align-items: baseline; }

.example-right-align { margin-left: auto; }

This example assumes that your mat-form-field is wrapped in a container with the class example-container. The key part here is to set the align-items property to baseline for the relevant elements to ensure vertical alignment.

Please adjust the styles based on your specific layout requirements. If you are still facing issues, you may need to experiment further or consider reaching out to the Angular Material community for additional guidance.

Appreciate the help @topdev658 😃. While this is an apt solution, I feel custom css shouldn't be used to fix core component styling. It shouldn't have to look like this in the first place unless it was intentional (in which case css patch like yours would be appropriate).

If I replace the matTextPrefix/Suffix with a larger character like the $ sign, the alignment works decent. I guess that's what the angular team was going for. But it's matTextPrefix/Suffix. Any text, or at least ascii characters, should work no? Not just special symbols.

[mohammedsahl]

I think I found a simpler workaround. Setting the --mat-form-field-subscript-text-line-height to 26px or greater levels the label with the prefix/suffix

Stackblitz (forked from the one above with the only change being the css): https://stackblitz.com/edit/t9161j-kpt1gh?file=src%2Fexample%2Fform-field-prefix-suffix-example.css