angular / angular/components

Checkboxes with long labels

オープン 初心者向け
#8,416 コメント 40 件 リアクション 53 件 担当者 0 名 GitHub で見る
area: material/checkbox feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

_checkbox-theme.scss_ の88行目付近から始め、カードまたは同様の包含要素の中に長いラベル付きのチェックボックスを再現します。報告された overflow に対して既存のタイポグラフィとレイアウトのルールを確認し、その後、長いラベルが複数行に折り返され、チェックボックスが左側で垂直方向に整列することを検証します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, scss, typescript
領域
frontend
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
静か
明瞭さ
明確に書かれている
初心者へのやさしさ
65/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。