angular / angular/components

Form field Floating labels gaps not customizable and not taking into account the label actual size

Aperta
#16,411 16 commenti 15 reazioni 0 assegnatari Vedi su GitHub
area: material/form-field feature P5
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Feature Description
So here is the thing. Since no dense mode and since we have a custom looking material inputs, I had to make my own customization on the scss theme of the form field. The problem appeared when I changed the font size and the font itself of the floating label. Suddenly I saw that the borders are overlapping the text.
```
const floatingLabelScale = 0.75;
const outlineGapPadding = 5;
```
these values are based on some assumption that the label size will never be customized.
Now, in order to override this behavior I had to create my own directive that changes the values
and recalculate the gaps.
So I would like to request a change of this logic to calculate gaps dynamically, or to expose these 2 numbers as inputs or something that can be changed from outside. I'm ok with an injection token as well.

#### Use Case

In order to allow more customization features and be able to change the font-size of the floating label.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia individuando l’implementazione Angular Material form-field che definisce il ridimensionamento delle label flottanti e i valori degli spazi dell’outline, quindi riproduci il problema con un font e una dimensione della label personalizzati. Determina se gli spazi debbano essere calcolati dinamicamente o esposti per la configurazione; il lavoro è completato quando le label personalizzate non si sovrappongono più ai bordi.

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

Valutazione

Stack tecnologico
angular, scss, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
42/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.