Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit c705f17

Browse files
committed
fix(input): prevent the floating label from overflowing
The calc that was used to truncate the long input labels was actually making them longer on IE. This is because IE calculates whether to overflow an element before applying any of the transforms. Closes #7403.
1 parent 562d7c1 commit c705f17

File tree

1 file changed

+0
-23
lines changed

1 file changed

+0
-23
lines changed

src/components/input/input.scss

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,6 @@ md-input-container {
285285
transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
286286
transition: transform $swift-ease-out-timing-function $swift-ease-out-duration,
287287
width $swift-ease-out-timing-function $swift-ease-out-duration;
288-
width: calc((100% - #{$input-label-float-width}) / #{$input-label-float-scale});
289288
}
290289
}
291290

@@ -342,17 +341,6 @@ md-input-container {
342341
width: calc(100% - #{$icon-offset} - #{$input-label-float-width});
343342
}
344343
}
345-
346-
&.md-input-focused,
347-
&.md-input-has-placeholder,
348-
&.md-input-has-value {
349-
> label {
350-
&:not(.md-no-float):not(._md-container-ignore),
351-
.md-placeholder {
352-
width: calc((100% - #{$icon-offset} - #{$input-label-float-width}) / #{$input-label-float-scale});
353-
}
354-
}
355-
}
356344
}
357345

358346
// icon offset should have higher priority as normal label
@@ -387,17 +375,6 @@ md-input-container {
387375
width: calc(100% - (#{$icon-offset} * 2));
388376
}
389377
}
390-
391-
&.md-input-focused,
392-
&.md-input-has-placeholder,
393-
&.md-input-has-value {
394-
> label {
395-
&:not(.md-no-float):not(._md-container-ignore),
396-
.md-placeholder {
397-
width: calc((100% - (#{$icon-offset} * 2)) / #{$input-label-float-scale});
398-
}
399-
}
400-
}
401378
}
402379
}
403380

0 commit comments

Comments
 (0)