angular / angular/components

Checkboxes with long labels

Open Beginner friendly
#8,416 40 comments 53 reactions 0 assignees View on GitHub
area: material/checkbox feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Research direction

Start in _checkbox-theme.scss around line 88 and reproduce a checkbox with a long label inside a card or similar containing element. Check the existing typography and layout rules against the reported overflow, then verify that long labels wrap into multiple lines with the checkbox vertically aligned on the left.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, scss, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.