Checkboxes with long labels
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
#### 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);
}
}
```

Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia in _checkbox-theme.scss_ intorno alla riga 88 e riproduci una casella di controllo con un’etichetta lunga all’interno di una scheda o di un elemento contenitore simile. Controlla le regole tipografiche e di layout esistenti rispetto all’overflow segnalato, quindi verifica che le etichette lunghe vadano a capo su più righe, con la casella di controllo allineata verticalmente a sinistra.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, scss, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Stato di attività
- Tranquilla
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 65/100