fix(input): horizontal overflow in IE and Edge

[crisbeto]

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.

@mmalerba I didn't notice any issues when going through the input container demo page, but do you think that this may have some unexpected side-effects?

[mmalerba]

In most cases this will be fine, but users are allowed to put custom content inside the md-input-container and if they try to put some absolutely positioned thing that intentionally overflows, this would clip it. Could we instead put a wrapper around the label and just clip that?

[crisbeto]

That should work as well. I'll give it a try.

[crisbeto]

If it's just a div with overflow: hidden, it doesn't help since the label's dimensions are based on the closest element that's relative. The other approach that I tried was having a wrapper that is position: absolute instead, but that ends up clipping the label when the input is focused.

This approach may be the simplest one without a lot of refactoring.

[mmalerba]

@jelbourn how do you feel about this?

[mmalerba]

@crisbeto Just to make sure I'm looking at the same bug, are you referring to the fact that when it's animating the placeholder overflows? because it looks like after it finishes animating its not a problem. how do you feel about this as an alternate solution? master...mmalerba:input-overflow

[crisbeto]

That works pretty well @mmalerba, although I'm not a huge fan of the  . I tried working around it with a pseudo element, but it didn't work. I can play around with it tomorrow.

[crisbeto]

@mmalerba I re-did it, based on your changes. I worked around the   with a pseudo element so we can keep everything inside the CSS. Could you re-review?

[mmalerba]

I wonder if its worth making this a separate class, seems potentially useful in other circumstances e.g. cdk-no-collapse or something

[crisbeto]

Hmm, not sure about it. In this case it's useful, but in others where there may be content in the element, it may end up pushing it.

[kara]

@crisbeto Can you rebase?

[kara]

@crisbeto Rebase again? Sorry

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}