angular / angular/components

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

Aperta
#26,349 1 commento 9 reazioni 0 assegnatari Vedi su GitHub
area: material/form-field P2
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia riproducendo i casi con label lunghi nello StackBlitz collegato, includendo le apparenze outlined e filled con prefissi e controlli input o select. Analizza il comportamento coinvolto di Angular Material form-field e verifica che i label rientrino nel campo o vengano troncati con i puntini di sospensione in modo coerente, senza fuoriuscire.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.