bug(form-field): matTextSuffix/matTextPrefix not vertically aligned with label about components HOT 3 OPEN

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.

from components.