fix(input): horizontal overflow in IE and Edge (#2784)

* 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. * refactor: use alternative approach * chore: re-add the fix after faulty merge
angular · Feb 9, 2017 · e0fe635 · e0fe635
1 parent a7a3967
commit e0fe635
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 12 deletions.
diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html
@@ -8,18 +8,20 @@
     <div class="mat-input-infix" [class.mat-end]="align == 'end'">
       <ng-content selector="input, textarea"></ng-content>
 
-      <label class="mat-input-placeholder"
-             [attr.for]="_mdInputChild.id"
-             [class.mat-empty]="_mdInputChild.empty && !_shouldAlwaysFloat"
-             [class.mat-focused]="_mdInputChild.focused"
-             [class.mat-float]="_canPlaceholderFloat"
-             [class.mat-accent]="dividerColor == 'accent'"
-             [class.mat-warn]="dividerColor == 'warn'"
-             *ngIf="_hasPlaceholder()">
-        <ng-content select="md-placeholder, mat-placeholder"></ng-content>
-        {{_mdInputChild.placeholder}}
-        <span class="mat-placeholder-required" *ngIf="_mdInputChild.required">*</span>
-      </label>
+      <span class="mat-input-placeholder-wrapper">
+        <label class="mat-input-placeholder"
+               [attr.for]="_mdInputChild.id"
+               [class.mat-empty]="_mdInputChild.empty && !_shouldAlwaysFloat"
+               [class.mat-focused]="_mdInputChild.focused"
+               [class.mat-float]="_canPlaceholderFloat"
+               [class.mat-accent]="dividerColor == 'accent'"
+               [class.mat-warn]="dividerColor == 'warn'"
+               *ngIf="_hasPlaceholder()">
+          <ng-content select="md-placeholder, mat-placeholder"></ng-content>
+          {{_mdInputChild.placeholder}}
+          <span class="mat-placeholder-required" *ngIf="_mdInputChild.required">*</span>
+        </label>
+      </span>
     </div>
 
     <div class="mat-input-suffix">

diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
@@ -128,6 +128,7 @@ $mat-input-underline-disabled-background-image:
   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 @@ $mat-input-underline-disabled-background-image:
   }
 }
 
+// Used to hide the placeholder overflow on IE, since IE doesn't take transform into account when
+// determining overflow.
+.mat-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.
 .mat-input-underline {