angular / angular/components

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

Ouverte
#26,349 1 commentaire 9 réactions 0 personnes assignées Voir sur GitHub
area: material/form-field P2
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire les cas de labels longs dans le StackBlitz associé, en couvrant les apparences outlined et filled avec des préfixes et des contrôles input ou select. Suivez le comportement de Angular Material form-field concerné et vérifiez que les labels tiennent dans le champ ou sont tronqués avec des points de suspension de manière cohérente sans déborder.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.