help(Form Field Outlined): How i can make my font keep the original size when form field is focused?

What are you trying to do?

I’m using Angular Material form field with input. When i click in the form field, my label is resized.
How i can make my font keep the original size when form field is focused?

What troubleshooting steps have you tried?

I find in styles the class that resize the font:

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

If i put scale(1.00) my font keeps the original size, but the border is collapsed.

Reproduction

There’s a way to recalculate the correct gap with this font size?

Environment

  • Angular: 8
  • CDK/Material : 7.3.7
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

1 possible answer(s) on “help(Form Field Outlined): How i can make my font keep the original size when form field is focused?

  1. This isn’t something we explicitly support with mat-form-field; the Material Design spec has the label shrinking when it enters the raised position