angular / angular/components

bug(option): mat-options with long text lack of gap since v15

Ouverte
#26,701 1 commentaire 4 réactions 0 personnes assignées Voir sur GitHub
area: material/select P3 regression
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?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14

### Description

Before v15, `mat-option`s with long text were truncated so their height was always 48px and naturally, a gap was there to well separate each option.

Now the text is no more truncated but a min-height of 48px is applied. If the text of a `mat-option` take only one line the gap remains and there is no problem. But with 2 lines of more, the gap is no more and reading becomes more difficult

### Reproduction

https://stackblitz.com/edit/angular-hjwez5?file=src/styles.scss

### Expected Behavior

![image](https://user-images.githubusercontent.com/23034761/221603790-430f1dbb-2142-409d-b93f-07d719ef8216.png)

```css
.mat-mdc-option {
padding-top: 12px;
padding-bottom: 12px;
box-sizing: border-box;
}
```

### Actual Behavior

![image](https://user-images.githubusercontent.com/23034761/221603654-56faf2c9-17e7-4fda-9af6-b95369301b1b.png)

### Environment

- Angular: 15.2.0
- CDK/Material: 15.2.0
- Browser(s): All
- Operating System (e.g. Windows, macOS, Ubuntu): All

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée, en particulier src/styles.scss, et examinez le style de mat-option pour le texte sur plusieurs lignes. C’est terminé lorsque l’espacement vertical visible entre les options comportant une ou plusieurs lignes est rétabli, tout en préservant l’espacement attendu de 48px pour les options sur une seule ligne.

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

Évaluation

Stack technique
angular, css, typescript
Domaine
design, frontend
Type d'issue
Bug
Difficulté
2/5
Temps estimé
1-3 heures
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

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