angular / angular/components

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

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

Description

### 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.

![Screenshot 2024-01-18 at 8 42 10 AM](https://github.com/angular/components/assets/32067562/47159140-76bf-4b6c-ab2f-2e76f2fced4a)

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction at src/example/form-field-prefix-suffix-example.html and confirm the vertical offset between the label and matTextSuffix/matTextPrefix in Angular 16. Trace the Material form-field rendering and styling from that example, then verify that the label, prefix, and suffix align vertically in the reproduction.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.