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: https://github.com/angular/components/blob/caad0b54ed41949f0ee529c152508749875bc9af/src/material/form-field/_form-field-theme.scss#L139

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): https://github.com/angular/components/issues/16251

[talamaska]

I don't see any hardcoded values in the typescript for mdc-form-filed. I guess it's now controlled by scss. I wonder how different will be to setup a custom theme in the mdc components. the given purple theme changes just the colors. but if you really want to customize your theme you will add a bunch of other settings which I had to discover by myself like $mat-light-theme-background, $mat-light-theme-foreground. I need to give material experimental try and see by myself if the faced issues with bigger labels still appear.

[digeomel]

@talamaska mdc-form-field is for the Material Design components. Here we're talking about Angular Material mat-form-field 😃

This is the hard-coded line I was referring to:

https://github.com/angular/components/blob/caad0b54ed41949f0ee529c152508749875bc9af/src/material/form-field/form-field.ts#L58

[talamaska]

@digeomel I'm sorry if my comment caused some misunderstanding I was referring to this new version https://github.com/angular/components/blob/caad0b54ed41949f0ee529c152508749875bc9af/src/material-experimental/mdc-form-field/form-field.ts It's also a mat-form-field but with mdc implementation, it should be a drop-in replacement when ready.

[digeomel]

@talamaska the confusion is caused by the google teams that have been maintaining two separate libraries, Angular Material and Material Design Web components. This is the first time I see this "experimental" merging of the two (if I understand well, this is the intention).

According to their docs:

This package contains prototypes and experiments in development for Angular Material. Nothing in this package is considered stable or production ready. While the package releases with Angular Material, breaking changes may occur with any release.

[Asone]

Adding an upvote so we can handle the label gap width and allow label scale change.

Also cheers to @rerezz for providing a functional workaround while awaiting for a patch !

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[AnkitaSood]

I used this approach using CSS only to overcome the limitation of the outline form field gap not adapting to font/typography changes to floating label

 mat-label { 
       background: white; 
       
        &::after { 
          content: ''; 
          display: inline-block;
          width: 0.25rem;
          background: white;
        }
      }

  and keep the transform scale on label to be 1.

      .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
      transform: translateY(-1.7175em) scale(0.75);
     }

[lucaszrz]

Any updates on this? :+1: