skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Kristiyan Kostadinov
2017-02-09 23:09:11 +01:00
committed by tinayuangao
parent a7a3967f9c
commit e0fe63515f
2 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/input/input-container.html
+14 -12
View File
@@ -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">
src/lib/input/input-container.scss
+19
View File
@@ -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 {