angular / angular/components

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

未关闭
#31,474 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
P2
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

贡献指南

打开贡献指南

调研方向

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.

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
55/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。