angular / angular/components

bug(mat-form-field): Incorrect display of long field label while not floating

Offen
#26,349 1 Kommentar 9 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/form-field P2
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

There are apparently several issues with the display of long label text in form fields that are not floated as is apparent from the following screen shot:

![grafik](https://user-images.githubusercontent.com/11717833/210228846-af7290ad-2bb0-45ff-b432-e7ef9cd837d3.png)

This is the Stackblitz that the shot was taken from: https://stackblitz.com/edit/angular-m5oo6h

As you can see:

* The label is transformed out of the form field with outlined appearance and a prefix
* Ellipsis is not being applied with filled appearance and an input (while mat-select displays beautifully), no matter if a prefix is applied or not

### Reproduction

Steps to reproduce:
1. Use a form field with a long label
2. Add an element with matPrefix to that form field

### Expected Behavior

The label should be sized and ellipsized to fit the form field

### Actual Behavior

The label overflows the form field or is not ellipsized, depending on the details of the field configuration.

### Environment

- Angular: 15.0.3
- CDK/Material: 15.0.3
- Browser(s): Firefox 108, Chromium 108
- Operating System (e.g. Windows, macOS, Ubuntu): Fedora 38

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die Fälle mit langen Labels im verknüpften StackBlitz zu reproduzieren, und decke dabei outlined- und filled-Darstellungen mit Präfixen sowie input- oder select-Steuerelementen ab. Verfolge das beteiligte Angular Material form-field-Verhalten und überprüfe, dass Labels konsistent in das Feld passen oder mit Ellipsen gekürzt werden, ohne überzulaufen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

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

Neue Issues direkt in Ihr Postfach

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