Skip to content

Commit 3a99f33

Browse files
committed
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.
1 parent 66a93b9 commit 3a99f33

File tree

1 file changed

+12
-1
lines changed

1 file changed

+12
-1
lines changed

src/material/form-field/_mdc-text-field-structure-overrides.scss

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,18 @@
2020
border: none;
2121
}
2222

23+
// MDC only sets a max-width form outlined form fields, but we need it
24+
// for filled ones as well in order for the text truncation to work.
25+
.mat-form-field-appearance-fill {
26+
.mdc-floating-label {
27+
max-width: 100%;
28+
}
29+
30+
.mdc-floating-label--float-above {
31+
max-width: 133.33%;
32+
}
33+
}
34+
2335
.mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
2436
// In order to ensure proper alignment of the floating label, we reset its line-height.
2537
// The line-height is not important as the element is absolutely positioned and only has one
@@ -135,5 +147,4 @@
135147
.mat-mdc-text-field-wrapper::before {
136148
content: none;
137149
}
138-
139150
}

0 commit comments

Comments
 (0)