Checkboxes with long labels
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 65/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Quiet
- Tech stack
- angular, scss, typescript
- Domain
- frontend
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.
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);
}
}
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 80
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from angular/components
-
area: material/tree docs gemini-triaged needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
angular/components#33832 ·
-
area: material/datepicker gemini-triaged P4
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
angular/components#33763 · 2 comments · 3 reactions ·
-
area: material/table gemini-triaged P4
Difficulty 1/5 Under an hour Newbie friendliness 88/100
angular/components#33709 · 1 comment ·
-
area: material/table docs gemini-triaged P4
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
angular/components#33455 ·
-
area: material/core gemini-triaged P3
Difficulty 1/5 Under an hour Newbie friendliness 78/100
angular/components#33059 · 2 comments ·
All issues in angular/components
Similar issues
-
clawsweeper:linked-pr-open clawsweeper:no-new-fix-pr clawsweeper:source-repro impact:message-loss issue-rating: 🦞 diamond lobster maturity:stable P2
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#616 ·
-
ZCode 3.14.3 に対応する Open
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
supermomonga/zcode-acp#24 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
growthbook/growthbook#7100 ·
-
triage
Difficulty 1/5 1-3 hours Newbie friendliness 88/100