From e8af2111795960514c99fd0e8be67d5ff9a955d6 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 24 Jan 2017 19:51:06 +0100
Subject: [PATCH 1/3] fix(input): horizontal overflow in IE and Edge

Currently input labels are set to 133% width and are scaled down to fit into their container. This works fine in most browsers, however it causes horizontal overflows on IE and Edge, because they don't consider the `transform` when determining whether an element overflows. This change fixes it by hiding all of the overflowing content.
---
 src/lib/input/input-container.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
index 04cb37ce473a..e13ae8850dab 100644
--- a/src/lib/input/input-container.scss
+++ b/src/lib/input/input-container.scss
@@ -9,6 +9,9 @@ md-input-container {
   // To avoid problems with text-align.
   text-align: left;
 
+  // Prevents the label from causing a horizontal overflow in IE/Edge.
+  overflow: hidden;
+
   [dir='rtl'] & {
     text-align: right;
   }

From 413d69196fdea9afac414f4cdeb89d283054a174 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 31 Jan 2017 21:47:25 +0100
Subject: [PATCH 2/3] refactor: use alternative approach

---
 src/lib/input/input-container.html | 26 ++++++++++++++------------
 src/lib/input/input-container.scss |  3 ---
 src/lib/input/input.scss           | 18 ++++++++++++++++++
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html
index 9601f7d86505..a298505b4c0d 100644
--- a/src/lib/input/input-container.html
+++ b/src/lib/input/input-container.html
@@ -5,18 +5,20 @@
     <div class="md-input-infix" [class.md-end]="align == 'end'">
       <ng-content selector="input, textarea"></ng-content>
 
-      <label class="md-input-placeholder"
-             [attr.for]="_mdInputChild.id"
-             [class.md-empty]="_mdInputChild.empty"
-             [class.md-focused]="_mdInputChild.focused"
-             [class.md-float]="floatingPlaceholder"
-             [class.md-accent]="dividerColor == 'accent'"
-             [class.md-warn]="dividerColor == 'warn'"
-             *ngIf="_hasPlaceholder()">
-        <ng-content select="md-placeholder"></ng-content>
-        {{_mdInputChild.placeholder}}
-        <span class="md-placeholder-required" *ngIf="_mdInputChild.required">*</span>
-      </label>
+      <span class="md-input-placeholder-wrapper">
+        <label class="md-input-placeholder"
+               [attr.for]="_mdInputChild.id"
+               [class.md-empty]="_mdInputChild.empty"
+               [class.md-focused]="_mdInputChild.focused"
+               [class.md-float]="floatingPlaceholder"
+               [class.md-accent]="dividerColor == 'accent'"
+               [class.md-warn]="dividerColor == 'warn'"
+               *ngIf="_hasPlaceholder()">
+          <ng-content select="md-placeholder"></ng-content>
+          {{_mdInputChild.placeholder}}
+          <span class="md-placeholder-required" *ngIf="_mdInputChild.required">*</span>
+        </label>
+      </span>
     </div>
 
     <div class="md-input-suffix"><ng-content select="[mdSuffix], [md-suffix]"></ng-content></div>
diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
index e13ae8850dab..04cb37ce473a 100644
--- a/src/lib/input/input-container.scss
+++ b/src/lib/input/input-container.scss
@@ -9,9 +9,6 @@ md-input-container {
   // To avoid problems with text-align.
   text-align: left;
 
-  // Prevents the label from causing a horizontal overflow in IE/Edge.
-  overflow: hidden;
-
   [dir='rtl'] & {
     text-align: right;
   }
diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index 6f2a15c25f57..2f1b2d475277 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -119,6 +119,7 @@ md-input, md-textarea {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow-x: hidden;
+  padding-top: 1em;
 
   transform: translateY(0);
   transform-origin: bottom left;
@@ -143,6 +144,23 @@ md-input, md-textarea {
   }
 }
 
+// Used to hide the placeholder overflow on IE, since IE doesn't take transform into account when
+// determining overflow.
+.md-input-placeholder-wrapper {
+  position: absolute;
+  left: 0;
+  top: -1em;
+  width: 100%;
+  padding-top: 1em;
+  overflow: hidden;
+  pointer-events: none;  // We shouldn't catch mouse events (let them through).
+
+  // Keeps the element height since the placeholder text is `position: absolute`.
+  &::after {
+    content: '\\00a0';
+  }
+}
+
 // The underline is what's shown under the input, its prefix and its suffix.
 // The ripple is the blue animation coming on top of it.
 .md-input-underline {

From 4d9b77a019c0cfacda5512827b1e992c27c73957 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 31 Jan 2017 21:51:47 +0100
Subject: [PATCH 3/3] chore: re-add the fix after faulty merge

---
 src/lib/input/input-container.scss | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
index 144adf58c49b..e40b55bcd4dc 100644
--- a/src/lib/input/input-container.scss
+++ b/src/lib/input/input-container.scss
@@ -128,6 +128,7 @@ md-input-container {
   font-size: 100%;
   pointer-events: none;  // We shouldn't catch mouse events (let them through).
   z-index: 1;
+  padding-top: 1em;
 
   // Put ellipsis text overflow.
   width: 100%;
@@ -159,6 +160,24 @@ md-input-container {
   }
 }
 
+// Used to hide the placeholder overflow on IE, since IE doesn't take transform into account when
+// determining overflow.
+.md-input-placeholder-wrapper {
+  position: absolute;
+  left: 0;
+  top: -1em;
+  width: 100%;
+  padding-top: 1em;
+  overflow: hidden;
+  pointer-events: none;  // We shouldn't catch mouse events (let them through).
+
+  // Keeps the element height since the placeholder text is `position: absolute`.
+  &::after {
+    content: '\\00a0';
+  }
+}
+
+
 // The underline is what's shown under the input, its prefix and its suffix.
 // The ripple is the blue animation coming on top of it.
 .md-input-underline {