angular / angular/components

bug(form-field): label position doesn't take outline-width into consideration

Đang mở
#31,474 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
P2
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 form-field with the outline appearance, the vertical position of the label isn't taking into consideration the outline width.
which means that the thicker the outline is, the more the label is offset from the center.

Image

When using 2px outline, this is not really visible, unless you dynamically change the outline width from 1px to 2px when hovering the form-field, which is really annoying to experience 😅

![Image](https://github.com/user-attachments/assets/b11d34fb-603d-4ef1-87cf-82d6d023c219)

### Reproduction

https://stackblitz.com/edit/tk7fhpq7?file=src%2Fexample%2Fform-field.scss

### Expected Behavior

The label should remain vertically centered like the input value/placeholder is.

### Actual Behavior

The label isn't vertically centered like the input value/placeholder is.

### Environment

- Angular: 20.0.4
- CDK/Material: 20.0.4
- Browser(s): Chrome 137
- Operating System: macOS

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start with the linked StackBlitz reproduction and inspect src/example/form-field.scss to reproduce the outline-label offset with different outline widths. Trace the Angular Material form-field outline label positioning, then verify that the label remains vertically centered like the input value or placeholder across the reported widths.

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
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
55/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.