bug(form-field): Outlined form-field should have enough space to contain floating label
- 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ả
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
When using `outline` appearance for `mat-form-field`, the floating label overflows out of component itself. The `mat-form-field` component should have enough space on top to contain floating label. See below screenshot for reference:
### Reproduction
StackBlitz link: https://stackblitz.com/edit/rxp9hmcc?file=src%2Fexample%2Fform-field-appearance-example.html
### Expected Behavior
The `mat-form-field` component should have enough space (margin) on top to contain floating label.
### Actual Behavior
The `mat-form-field` component does not have enough space (margin) on top to contain floating label.
### Environment
- Angular: 20
- CDK/Material: 20
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện StackBlitz được liên kết và ví dụ về giao diện form-field của bản tái hiện đó, sau đó kiểm tra bố cục và các style của mat-form-field outlined trong Angular Material liên quan đến floating label. Công việc được hoàn tất khi component outlined cung cấp đủ khoảng trống phía trên cho floating label mà không bị overflow trong môi trường được báo cáo gồm Angular 20, Chrome và macOS.
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, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 48/100