Form field Floating labels gaps not customizable and not taking into account the label actual size
- 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