angular / angular/components

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

Offen
#16,411 16 Kommentare 15 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/form-field feature P5
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die Angular Material form-field-Implementierung zu lokalisieren, die die Skalierung schwebender Labels und die Werte für Outline-Lücken definiert, und reproduziere dann das Problem mit einer benutzerdefinierten Label-Schriftart und -größe. Bestimme, ob die Lücken dynamisch berechnet oder zur Konfiguration bereitgestellt werden sollten; als erledigt gilt, wenn angepasste Labels die Rahmen nicht mehr überlappen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, scss, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.