angular / angular/components

Label for mat-form-field is overlapping with mat-icon in mat-tab.

未关闭
#26,428 24 条评论 28 个 reaction 已指派 0 人 在 GitHub 查看
area: many area: material/tabs P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14

### Description

Label is overlapping with icon.

- When using in 2nd Tab of Tabgroup, surrounded with a e.g. a div, p, ...
- and
- When using the the mat-form-field with appearance "outline" and an icon with matPrefix.

```



Outline form field

sentiment_very_satisfied
Hint


```

### Reproduction

Steps to reproduce:
1. add to app.module
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatTabsModule } from '@angular/material/tabs';

2. add to app.component
```




Outline form field

sentiment_very_satisfied
Hint






Outline form field

sentiment_very_satisfied
Hint



#
```
3.
for the input field in 2nd tab : label is overlapping with mat-icon
4.
when inspecting the style, it seems the X transform is not correct

![tabs](https://user-images.githubusercontent.com/8170828/212326383-c7770735-0201-459b-bcc6-1489abcefdaa.png)

### Expected Behavior

Label should have correct margin

### Actual Behavior

Label is overlapping with mat-icon

### Environment

- Angular:15.0.0
- CDK/Material:15.1.0
- Browser(s):Chrome, Edge
- Operating System (e.g. Windows, macOS, Ubuntu):Windows 10

贡献指南

打开贡献指南

调研方向

首先使用带有 outlined mat-form-field、matPrefix 图标和第二个 mat-tab 的所提供 Angular Material 示例进行复现,然后检查报告中指出的 label transform 样式。当 label 具有正确的 margin,并且在第二个 tab 中不再与 mat-icon 重叠,同时保留第一个 tab 的行为时,即表示完成。

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

评估

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

把新 issue 发到你的邮箱

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