Commit 3a99f33

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 3a99f33Copy full SHA for 3a99f33

File tree

1 file changed

+12

-1

lines changed

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

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 number	Diff line number	Diff line change
`@@ -20,6 +20,18 @@`
`20`	`20`	`border: none;`
`21`	`21`	`}`
`22`	`22`
	`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`	`+`
`23`	`35`	`.mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {`
`24`	`36`	`// In order to ensure proper alignment of the floating label, we reset its line-height.`
`25`	`37`	`// The line-height is not important as the element is absolutely positioned and only has one`
`@@ -135,5 +147,4 @@`
`135`	`147`	`.mat-mdc-text-field-wrapper::before {`
`136`	`148`	`content: none;`
`137`	`149`	`}`
`138`		`-`
`139`	`150`	`}`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 3a99f33

File tree

1 file changed

1 file changed

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

0 commit comments