fix(select): floating label overlapping elements above select

Adds some padding to the top of a select, reserving enough space for the floating label. Fixes angular#6171.
crisbeto · Aug 2, 2017 · 2652c8a · 2652c8a
1 parent 8a23157
commit 2652c8a
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
@@ -72,11 +72,15 @@
 }
 
 @mixin mat-select-typography($config) {
+  $trigger-font-size: mat-font-size($config, subheading-2);
+
   .mat-select {
+    // Reserve enough space for the floating placeholder.
+    padding-top: $trigger-font-size;
     font-family: mat-font-family($config);
   }
 
   .mat-select-trigger {
-    font-size: mat-font-size($config, subheading-2);
+    font-size: $trigger-font-size;
   }
 }