angular / angular/components

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

Offen
#28,448 2 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/form-field P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion unter src/example/form-field-prefix-suffix-example.html und bestätige den vertikalen Versatz zwischen dem Label und matTextSuffix/matTextPrefix in Angular 16. Verfolge das Rendering und die Formatierung von Material form-field anhand dieses Beispiels und überprüfe anschließend, dass Label, Prefix und Suffix in der Reproduktion vertikal ausgerichtet sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
design, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.