From e97d483104b268651951878d60edf984cf432116 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 2 Aug 2017 19:28:13 +0200
Subject: [PATCH] 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 #6171.
---
 src/lib/select/_select-theme.scss | 6 +++++-
 src/lib/select/select.spec.ts     | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index 651f742000ef..06ce7a5ffd76 100644
--- 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;
   }
 }
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 2b00b161f9db..c9c79b6f8d27 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -1066,7 +1066,7 @@ describe('MdSelect', () => {
         // these styles are necessary because we are first testing the overlay's position
         // if there is room for it to open to its full extent in either direction.
         select.style.position = 'fixed';
-        select.style.top = '300px';
+        select.style.top = '285px';
         select.style.left = '20px';
       });
 
@@ -1194,9 +1194,9 @@ describe('MdSelect', () => {
 
         // Scroll should adjust by the difference between the top space available (85px + 8px
         // viewport padding = 77px) and the height of the panel above the option (113px).
-        // 113px - 77px = 36px difference + original scrollTop 88px = 124px
+        // 113px - 93px = 20px difference + original scrollTop 88px = 108px
         expect(scrollContainer.scrollTop)
-            .toEqual(124, `Expected panel to adjust scroll position to fit in viewport.`);
+            .toEqual(108, `Expected panel to adjust scroll position to fit in viewport.`);
 
         checkTriggerAlignedWithOption(4);
       });