fix(material/select): fix arrow alignment (#25626)

angular · Sep 14, 2022 · 9be94a0 · 9be94a0
1 parent fd9d326
commit 9be94a0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/material/form-field/_form-field-native-select.scss b/src/material/form-field/_form-field-native-select.scss
@@ -46,6 +46,8 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
       border-top: $mat-form-field-select-arrow-height solid;
       position: absolute;
       right: 0;
+      top: 50%;
+      margin-top: -#{math.div($mat-form-field-select-arrow-height, 2)};
 
       // Make the arrow non-clickable so the user can click on the form control under it.
       pointer-events: none;

diff --git a/src/material/select/select.scss b/src/material/select/select.scss
@@ -57,9 +57,13 @@ $scale: 0.75 !default;
   display: inline-flex;
   align-items: center;
 
-  // When used in a box appearance form-field the arrow should be shifted up 40%.
+  // When used in a fill appearance with a label, form-field the arrow should be shifted up 8px.
   .mat-form-field-appearance-fill & {
-    transform: translateY(-40%);
+    transform: translateY(-8px);
+  }
+
+  .mat-form-field-appearance-fill .mdc-text-field--no-label & {
+    transform: none;
   }
 }