angular / angular/components

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

Open
#16,411 16 comments 15 reactions 0 assignees View on GitHub
area: material/form-field feature P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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.

Contributor guide

Open the contributing guide

Research direction

Start by locating the Angular Material form-field implementation that defines floating-label scaling and outline gap values, then reproduce the issue with a custom label font and size. Determine whether the gaps should be calculated dynamically or exposed for configuration; done means customized labels no longer overlap the borders.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, scss, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.