angular / angular/components

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

Ouverte
#26,428 24 commentaires 28 réactions 0 personnes assignées Voir sur GitHub
area: many area: material/tabs P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire l’exemple Angular Material fourni avec un outlined mat-form-field, une icône matPrefix et le deuxième mat-tab, puis examinez les styles de transformation du label indiqués dans le rapport. Le travail est terminé lorsque le label possède la marge correcte et ne chevauche plus le mat-icon dans le deuxième tab, tout en préservant le comportement du premier tab.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.