Skip to content

Commit d0cd9bb

Browse files
authored
fix(material/select): ensure arrow is centered on all densities (#27011)
On lower densities some form field appearances hide the label which caused the arrow to be misaligned. These changes add an override to center the label again. Fixes #26757.
1 parent 514c113 commit d0cd9bb

File tree

1 file changed

+20
-1
lines changed

1 file changed

+20
-1
lines changed

src/material/select/_select-theme.scss

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@use '@material/menu-surface' as mdc-menu-surface;
33
@use '@material/list/evolution-mixins' as mdc-list;
44
@use '@material/typography' as mdc-typography;
5+
@use '@material/density' as mdc-density;
6+
@use '@material/textfield' as mdc-textfield;
57

68
@use '../core/theming/theming';
79
@use '../core/typography/typography';
@@ -79,7 +81,24 @@
7981
}
8082
}
8183

82-
@mixin density($config-or-theme) {}
84+
@mixin density($config-or-theme) {
85+
$density-scale: theming.get-density-config($config-or-theme);
86+
87+
// Density is clamped at -5 here, because MDC's form field throws an error for anything lower.
88+
$form-field-height: mdc-density.prop-value(
89+
$density-config: mdc-textfield.$density-config,
90+
$density-scale: theming.clamp-density($density-scale, -5),
91+
$property-name: height,
92+
);
93+
94+
// On lower densities the filled form field hides its label which causes the label to
95+
// be misaligned. Remove the additional offset that was added because of the label.
96+
@if ($form-field-height < mdc-textfield.$minimum-height-for-filled-label) {
97+
.mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
98+
transform: none;
99+
}
100+
}
101+
}
83102

84103
@mixin theme($theme-or-color-config) {
85104
$theme: theming.private-legacy-get-theme($theme-or-color-config);

0 commit comments

Comments
 (0)