Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Checkboxes with long labels

Aperta Adatta ai principianti
#8,416 40 commenti 53 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
65/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
angular, scss, typescript
Ambito
frontend

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.

Descrizione

area: material/checkbox feature P3
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

Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 2h
PR unite (30g)
80

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di angular/components

Tutte le issue di angular/components

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.