Checkboxes with long labels
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
#### 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);
}
}
```

Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu trong _checkbox-theme.scss_ quanh dòng 88 và tái tạo một checkbox có nhãn dài bên trong một card hoặc phần tử chứa tương tự. Kiểm tra các quy tắc typography và layout hiện có đối chiếu với overflow được báo cáo, sau đó xác minh rằng các nhãn dài được ngắt thành nhiều dòng với checkbox được căn chỉnh theo chiều dọc ở bên trái.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, scss, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 2/5
- Thời gian dự kiến
- 1-3 giờ
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 65/100