placeholder gets cut off in a list

[geelus]

Bug, feature request, or proposal:

This is related to the latest version beta 3. All the placeholders are cut-off when used in a list

What is the expected behavior?

It was good in previous versions and if we can roll back, it would be great!

What is the current behavior?

What are the steps to reproduce? Simply use an input in an md-list.

Providing a Plunker (or similar) is the best way to get the team to see your issue:
http://plnkr.co/edit/l1Am9u7emgyEFsVpRGBk?p=preview

What is the use-case or motivation for changing an existing behavior?

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

Material 2 beta 3

Is there anything else we should know? no

[jelbourn]

It looks like the input container is being cut off because they're inside of an md-list-item. The items are, per Material Design spec, 48px. The input, however, will have a height based on whatever the current font-size is. I haven't found any commits in Angular Material in that date range that would have caused this to change- are there any other style dependencies in your app that could have been modified?

It's somewhat strange to form inputs of list items like this; md-list is primarily intended to show items either purely for display or that have discrete actions (https://material.io/guidelines/components/lists.html).

My recommendation would be to avoid using md-list in this context. Alternatively, if that doesn't work for whatever reason, you can customize the height of the .mat-list-item to be larger and not cut off the inputs.

[geelus]

Hi Jeremy

All we did was to upgrade to the new version and now we're having this issue across the entire application.

There is no other style dependencies in our app that could have contributed on this issue.

So do you mean this won't ever be fixed and this is not a bug? Can you please confirm so that we can work on an internal solution workaround?

Thanks

[willshowell]

@jelbourn it actually does looks like this was a side effect of upgrading to beta3 via #930.

• Note that list items now use the md-ripple attribute

• Also note that .mat-ripple adds overflow: hidden

Even more (and what could probably be considered a bug) is that you cannot remove the .mat-ripple class by using [disableRipple]="true".

[jelbourn]

@willshowell that does seem like an issue- file a specific bug for that?

[willshowell]

@jelbourn already at #4156!

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