Skip to content

bug(form-field): mat-form-field text overlap with suffix icon #31108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task
Mradmedamine opened this issue May 13, 2025 · 2 comments
Open
1 task

bug(form-field): mat-form-field text overlap with suffix icon #31108

Mradmedamine opened this issue May 13, 2025 · 2 comments
Labels
P4 A relatively minor issue that is not relevant to core functions

Comments

@Mradmedamine
Copy link

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

when having mat-form-field with long label text the text overlap with suffix icon

Reproduction

StackBlitz link: https://stackblitz.com/edit/sktdb4nx-laqmu1py?file=src%2Fexample%2Fform-field-appearance-example.html
Steps to reproduce:

  1. just put a long text on a mat-form-field with suffix icon

Expected Behavior

no overlap with long text

Actual Behavior

Image

the text overlaps with the icon

Environment

  • Angular: 19.2.15
  • CDK/Material: 19.2.15
  • Browser(s): chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): windows
@Mradmedamine Mradmedamine added the needs triage This issue needs to be triaged by the team label May 13, 2025
@ThornWalli
Copy link

Hello,

have already experienced the same behavior with Angluar 18.

Stackblitz: https://stackblitz.com/edit/stackblitz-starters-jdfeo5oc?file=src%2Fapp%2Fapp.component.html

@andrewseguin andrewseguin changed the title bug(COMPONENT): mat-form-field text overlap with suffix icon bug(form-field): mat-form-field text overlap with suffix icon May 14, 2025
@andrewseguin
Copy link
Contributor

Besides "no overlap", what behavior are you expecting here? Ellipsis is not ideal since we do not want to hide visual text, especially a label.

@andrewseguin andrewseguin added P4 A relatively minor issue that is not relevant to core functions and removed needs triage This issue needs to be triaged by the team labels May 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

No branches or pull requests

3 participants