angular / angular/components

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

Ouverte
#16,411 16 commentaires 15 réactions 0 personnes assignées Voir sur GitHub
area: material/form-field feature P5
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

Recevez les nouvelles issues par e-mail

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