From 474d3f73f8a6a18c9487945755acb6f929c7ef9b Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 3 Jan 2023 11:35:18 +0100 Subject: [PATCH] fix(material/form-field): label not truncated in fill appearance Fixes that the label text wasn't being truncated for form fields with the `fill` appearance, because MDC only sets a `max-width` on outlined form field labels. Fixes #26337. --- .../_mdc-text-field-structure-overrides.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/material/form-field/_mdc-text-field-structure-overrides.scss b/src/material/form-field/_mdc-text-field-structure-overrides.scss index d91ee2792e60..bcdfeb3e9c75 100644 --- a/src/material/form-field/_mdc-text-field-structure-overrides.scss +++ b/src/material/form-field/_mdc-text-field-structure-overrides.scss @@ -20,6 +20,19 @@ border: none; } + // TODO(crisbeto): port this fix over into MDC + // MDC only sets a max-width form outlined form fields, but we need it + // for filled ones as well in order for the text truncation to work. + .mat-form-field-appearance-fill { + .mdc-floating-label { + max-width: 100%; + } + + .mdc-floating-label--float-above { + max-width: 133.33%; + } + } + .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label { // In order to ensure proper alignment of the floating label, we reset its line-height. // The line-height is not important as the element is absolutely positioned and only has one @@ -135,5 +148,4 @@ .mat-mdc-text-field-wrapper::before { content: none; } - }