angular / angular/components

Checkboxes with long labels

Offen Anfängerfreundlich
#8,416 40 Kommentare 53 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/checkbox feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Bug, feature request, or proposal:
Bug?

#### What is the expected behavior?
Checkboxes with long labels won't word wrap (as it did in earlier versions). (see bottom part of attacjed image)

#### What is the current behavior?
The labels of checkboxes will overflow the containing element. (see top part of attached image) The problem appeared when I upgraded to Angular 5 from 4-something and I pushed up material at the same time. It's possible this behavior was introduced in an earlier version of material than the latest.

#### What are the steps to reproduce?
Just make a checkbox with a long label inside a card or something.

#### What is the use-case or motivation for changing an existing behavior?
I have a checkbox on a login-page with a long text-string about the user agreeing on this and that. When wrapped it's about three lines with the checkbox vertically aligned on the left side.

#### Is there anything else we should know?
I solved it locally by altering _checkbox-theme.scss from line 88:
```
@mixin mat-checkbox-typography($config) {
.mat-checkbox {
font-family: mat-font-family($config);
}
.mat-checkbox-label { // NEW
white-space: initial; // NEW
} // NEW
// TODO(kara): Remove this style when fixing vertical baseline
.mat-checkbox-layout .mat-checkbox-label {
line-height: mat-line-height($config, body-2);
}
}
```
![screendump](https://user-images.githubusercontent.com/5206576/32732086-d3c83424-c88b-11e7-8d83-805e53d500d9.png)

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne in _checkbox-theme.scss_ ungefähr bei Zeile 88 und reproduziere eine Checkbox mit einem langen Label innerhalb einer Karte oder eines ähnlichen enthaltenden Elements. Prüfe die vorhandenen Typografie- und Layoutregeln im Hinblick auf den gemeldeten overflow und verifiziere anschließend, dass lange Labels in mehrere Zeilen umgebrochen werden und die Checkbox links vertikal ausgerichtet ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

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

Neue Issues direkt in Ihr Postfach

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