md-input placeholder text is partially hidden

[Saegrov]

Bug, feature request, or proposal:

Bug introduced in the latest alpha-6. I'm not sure if I'm using it wrong or if this is expected behaviour.

What is the expected behavior?

Current behaviour in alpha-5

What is the current behavior?

After upgrading to alpha-6

What are the steps to reproduce?

Using md-input.

Which versions of Angular, Material, OS, browsers are affected?

Using Angular RC-3, Material alpha-6.
It's affected in Safari, Firefox and Chrome on OSX. Haven't tested other browsers.

Is there anything else we should know?

Introduced in the following commit: cf2703c
Disabling the overflow: hidden on the :hostselector for md-input solves the issues.

[ghost]

Doesn't seem to happen on Chrome / Firefox / Edge in Windows (Angular2 RC4 & Material2 alpha 6)

[Saegrov]

I'll see if I can make a plunkr or repo to reproduce it. Is there any plunkr template that has the latest alpha? The one in the Readme seems to have the alpha-5: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd?p=preview

[DzmitryShylovich]

http://plnkr.co/edit/2TLGbkVW9GP1n3FSmax9?p=preview

[Zyzle]

I'm seeing a similar behaviour with the hint labels after upgrading to alpha-6 but cant seem to reproduce it in @DzmitryShylovich's plunk it is however present on the material demo app.

[Saegrov]

@DzmitryShylovich Are you sure this includes the latest input? It seems the overflow:hidden property isn't on the md-input element in the plunkr.

I created a repo to demonstrate it:
https://github.com/Saegrov/angular-2-input-bug
Edit: I've hosted an example here: http://temp-github-issue.s3-website-eu-west-1.amazonaws.com/

Apologies for the large repo to demonstrate a rather small bug (i just used the angular-2-webpack-starter).

[RoxKilly]

I observe the same thing with input hints. I'm using Angular RC4, Material Alpha 6, on Firefox 48 Beta.

I can also confirm that removing overflow:hidden rule from <md-input> resolves the issue

[msegers]

Same here, I just currently slapped a md-input { overflow: visible !important; } in my css.

[PascalTemel]

I'm experiencing the issue with hidden hint labels aswell.

[kara]

@Saegrov I can confirm this is cut off in iOS Safari as well. The fix you suggested seems right at first glance (@hansl will have to take a look). Just submitted a quick PR with the change: #871.

[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.}