Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Checkboxes with long labels

Abierto Apto para principiantes
#8,416 40 comentarios 53 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
65/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
angular, scss, typescript
Área
frontend

Línea de trabajo

Comienza en checkbox-theme.scss alrededor de la línea 88 y reproduce una casilla de verificación con una etiqueta larga dentro de una tarjeta o un elemento contenedor similar. Comprueba las reglas de tipografía y diseño existentes en relación con el overflow indicado y, después, verifica que las etiquetas largas se ajusten en varias líneas con la casilla de verificación alineada verticalmente a la izquierda.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 2 h
PR fusionados (30 d)
80

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.