Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Width of interactive list with ripple-upgraded is too large. #463

Closed
h-ikeda opened this issue Apr 3, 2017 · 1 comment
Closed

Width of interactive list with ripple-upgraded is too large. #463

h-ikeda opened this issue Apr 3, 2017 · 1 comment
Assignees
@lynnmercier
Labels
backlog bug

Comments

@h-ikeda
Copy link

h-ikeda commented Apr 3, 2017 •
edited
Loading

What MDC-Web Version are you using?

v0.7.0

What browser(s) is this bug affecting?

Chrome Version 56.0.2924.87 (64-bit)

What OS are you using?

Windows 7 Service Pack 1

What are the steps to reproduce the bug?

At https://material-components-web.appspot.com/list.html
The list items of "Interactive Lists (with ink ripple) " escape from "nav" container.

What is the expected behavior?

Width of list items ("a") is "nav" container's width + 32px.

What is the actual behavior?

Padding of list items is 16 + 16 = 32px, so width of list items should be container's width - 32px.
@traviskaufman
Copy link
Contributor

Thanks for reporting @h-ikeda

Looks like the issue is with this line: https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/mdc-list.scss#L165.

It seems to me that we should just make this width: 100%. Definitely willing to accept a PR for this fix! 😄

@lynnmercier lynnmercier self-assigned this Apr 3, 2017
lynnmercier added a commit that referenced this issue Apr 3, 2017
@lynnmercier
fix(list): Update interactive list's with ripple-upgrade to be narrower
0d4b04e 
Resolves #463, Update interactive list's with ripple-upgrade to be narrower. Padding of list items is 16 + 16 = 32px, so width of list items should be container's width - 32px.
@lynnmercier lynnmercier mentioned this issue Apr 3, 2017
Merged
lynnmercier added a commit that referenced this issue Apr 4, 2017
@lynnmercier
fix(list): Update interactive list's with ripple-upgrade to be narrow…
c062319 
…er (#468)

Resolves #463, Update interactive list's with ripple-upgrade to be narrower. Padding of list items is 16 + 16 = 32px, so width of list items should be container's width - 32px.
pgbross pushed a commit to pgbross/material-components-web that referenced this issue Apr 5, 2017
@lynnmercier @pgbross
fix(list): Update interactive list's with ripple-upgrade to be narrow…
a58bcc4 
…er (material-components#468)

Resolves material-components#463, Update interactive list's with ripple-upgrade to be narrower. Padding of list items is 16 + 16 = 32px, so width of list items should be container's width - 32px.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lynnmercier lynnmercier

Labels
backlog bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@traviskaufman @h-ikeda @lynnmercier