Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

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

Comments

@h-ikeda
Copy link

h-ikeda commented Apr 3, 2017

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
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 added a commit that referenced this issue Apr 4, 2017
…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
…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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants