angular / angular/components

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

Offen
#26,701 1 Kommentar 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/select P3 regression
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion, insbesondere mit src/styles.scss, und untersuche das mat-option-Styling für mehrzeiligen Text. Als erledigt gilt die Änderung, wenn der sichtbare vertikale Abstand zwischen Optionen mit einer oder mehreren Zeilen wiederhergestellt ist und dabei der erwartete Abstand von 48px für einzeilige Optionen erhalten bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, css, typescript
Bereich
design, frontend
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

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