mwc-textfield label clipped when font-size changed

[andreinocenti]

Describe the bug

When the --mdc-typography-subtitle1-font-size: is changed the input label is clipped when the textfield is "filled" or with focus.

When the field is not focused or not filled

When the field is focused or filled.

I have tried the textfield.layout() with several different approachs. I tried set it with timeout or when the field is focused and no lucky.

To Reproduce

Set the css below to change the mwc-textfield font-size, it was too big with the new font that i must use.

mwc-textfield{
    --mdc-typography-font-family: "Comfortaa";
    --mdc-typography-subtitle1-font-size: "14px";
}

Expected behavior

To show the label without clip the text

Browser Version (please complete the following information):

• OS: Windows 10
• Browser chrome

[allan-chen]

Thanks for the issue. Custom font-sizes are not supported right now, but there is an upcoming rewrite of the generic "field" component which should resolve this issue.

[Yexan]

Hey @andreinocenti :)

I'm facing the same issue. If you want by the time it get customizable you can decrease the label size on focus / active state. It's a bit smaller depending on your label custom font size but might do the trick

.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
  // This was set at 1rem
  // it 's for label and text area
  font-size: 0.8rem;
}

Have a good day 😊

[asyncLiz]

This is fixed in the new Material 3 text field