0

When I change the font type in my form, label overlays the outline. How can i fix this?

enter image description here

in the following image it is shown how it should be:

enter image description here

Julio
  • 5,208
  • 1
  • 13
  • 42
Ivan D Cuadro
  • 1
  • Welcome to SO. Your question seems too broad. What have you tried? What is your code? Please check out [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve), and edit your question to include a reproducible example. – Oliver Apr 26 '19 at 04:43
  • Also possible duplicate of [How do you keep parents of floated elements from collapsing?](https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing?rq=1) and [floating label and placeholder overlapping](https://stackoverflow.com/questions/53894005/floating-label-and-placeholder-overlapping) – Oliver Apr 26 '19 at 04:45
  • Possible duplicate of [How do you keep parents of floated elements from collapsing?](https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing) – Oliver Apr 26 '19 at 04:46

1 Answers1

0

Seems like after 3 years there's still no fix to this issue in Angular Material.

However, there are two workarounds:

First workaround:

  • create a directive that links to all mat-form-field components (directives) with appearance attribute set to outline
  • listen to document.fonts.ready event and run updateOutlineGap on the MatFormField
  • export the directive in AppModule or SharedModule to make it accessible everywhere
  • this way Angular will update the outline size as soon as the custom font is loaded
import { AfterViewInit, Directive } from '@angular/core';
import { MatFormField } from '@angular/material/form-field';

@Directive({
    selector: 'mat-form-field[appearance=outline]',
})
export class UpdateOutlineGapDirective implements AfterViewInit {
    constructor(private formField: MatFormField) {
    }

    ngAfterViewInit() {
        document.fonts.ready.then(() => {
            this.formField.updateOutlineGap();
        });
    }
}

Second workaround:

  • add #userNameField to your mat-form-field element
  • add (focus)="userNameField.updateOutlineGap()" to the input element
  • this way every time the input is focused, Angular will update the outline size
Poveu
  • 33
  • 6