Form field Floating labels gaps not customizable and not taking into account the label actual size
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### 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.
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par localiser l’implémentation Angular Material form-field qui définit la mise à l’échelle des labels flottants et les valeurs des espaces de l’outline, puis reproduisez le problème avec une police et une taille de label personnalisées. Déterminez si les espaces doivent être calculés dynamiquement ou exposés pour configuration ; le travail est considéré comme terminé lorsque les labels personnalisés ne chevauchent plus les bordures.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, scss, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 42/100