angular / angular/components

bug(form-field): mat-label overlap mat-suffix

Open
#28,743 8 comments 1 reaction 0 assignees View on GitHub
area: material/form-field P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

15.x

### Description

When the mat-label is too long, it overlap the mat-suffix of the mat-form-field.

### Reproduction

- Create a mat-form-field
- Place a mat-suffix inside of it
- Place a long mat-label inside of it

### Expected Behavior

![Capture d’écran 2024-03-19 084043](https://github.com/angular/components/assets/16737025/f2a0e39d-548d-42ff-a487-0cf7339f9389)

### Actual Behavior

![Capture d’écran 2024-03-19 084335](https://github.com/angular/components/assets/16737025/3e33e3f4-2b4b-4a34-b28e-ba54e3553026)

### Environment

- Angular: 17.x
- CDK/Material: Material
- Browsers: Firefox & Google Chrome
- Windows

Contributor guide

Open the contributing guide

Research direction

Reproduce a mat-form-field containing a mat-suffix and a long mat-label using Angular 17, then compare the result in Firefox and Chrome with the reported Angular 15 behavior. Done means the label no longer overlaps the suffix while the form-field remains usable.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.