angular / angular/components

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

Aperta
#26,428 24 commenti 28 reazioni 0 assegnatari Vedi su GitHub
area: many area: material/tabs P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia riproducendo l'esempio Angular Material fornito con un outlined mat-form-field, un'icona matPrefix e il secondo mat-tab, quindi esamina gli stili di trasformazione del label indicati nel report. Il lavoro è completo quando il label ha il margine corretto e non si sovrappone più al mat-icon nel secondo tab, preservando il comportamento del primo tab.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.