Skip to content

Commit 1cdd781

Browse files
committed
fix(material/select): ensure arrow is centered on all densities
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 abc4940 commit 1cdd781

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)