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

[talamaska]

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.

[akiik]

I would like to see that option too. Facing the same issue.

[rb-mwindh]

Same reason (overriding styles with custom stylesheet), same wish.
Either make the font size customizable (or better: make the scale factor customizable), so it can be adjusted (or deactivated by setting it to 1) as needed.

[rerezz]

Same here. It would be great to be able to make the scale factor customizable as @rb-mwindh suggested.

In the meanwhile I created a patch:

import {MatFormField} from '@angular/material/form-field';

export function patchMatFormField() {
  const patchedFormFieldClass = MatFormField.prototype as any;

  patchedFormFieldClass.updateOutlineGapOriginal = MatFormField.prototype.updateOutlineGap;
  MatFormField.prototype.updateOutlineGap = function () {
    this.updateOutlineGapOriginal();
    const container = this._connectionContainerRef.nativeElement;
    const gapEls = container.querySelectorAll('.mat-form-field-outline-gap');
    gapEls.forEach((gp) => {
      const calculatedGapWidth = +gp.style.width.replace('px', '');
      const gapWidth = calculatedGapWidth / 0.75;
      gp.style.width = `${gapWidth}px`;
    });
  };
}

And apply it just before my entry module:

patchMatFormField();

@NgModule({

This works for me with this styling:

mat-form-field.mat-form-field.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.6em) scale(1);
    width: 133.33333%;
  }
}

[mmalerba]

The form-field should do its best to recalculate the label size, but if it doesn't, you can use the updateOutlineGap API to do it manually.

If this doesn't cover your use case, please provide a reproduction demonstrating the issue

[digeomel]

@mmalerba the updateOutlineGap "API" doesn't cut it, because as others explained above, you have a hard-coded floatingLabelScale = 0.75 both on the component method, and in the component SCSS here:

components/src/material/form-field/_form-field-theme.scss

Line 139 in caad0b5

$subscript-font-scale: 0.75;

In our case, we created a custom theme, overriding the .scss and specifying $subscript-font-scale: 0.875;. So, unless we implement a runtime "patch" like the one suggested by @rerezz , I don't see any other way around it.

[devversion]

Seems like a reasonable feature request to me. Apparently, the form-field follows the Material Design spec, so adding such flexibility for custom styling could be considered out of scope, but it seems low-effort to provide a way to control the scaling factor, so I think it might be worth it (given that custom form fields seem common).

I'm linking this issue to our MDC-based form-field tracking issue (so that we can re-audit this): #16251