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.

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

Drawer list with ripple #526

Closed
Shyam-Chen opened this issue Apr 18, 2017 · 10 comments
Closed

Drawer list with ripple #526

Shyam-Chen opened this issue Apr 18, 2017 · 10 comments
Labels

Comments

@Shyam-Chen
Copy link
Contributor

http://codepen.io/Shyam-Chen/pen/RVPexY?editors=1010

default

@vivekmarakana
Copy link
Contributor

Issue seems to be with left: -16px; in .mdc-list-item.mdc-ripple-upgraded.

@traviskaufman Also, we should add box-sizing: border-box; to all element as width: 100% overflows the space when there's padding involved.

@Shyam-Chen
Copy link
Contributor Author

Shyam-Chen commented Apr 18, 2017

.mdc-list-item.mdc-ripple-surface {
  box-sizing: border-box;
  left: 0;
}

default

@vivekmarakana
Copy link
Contributor

This is what you were looking for, right?

@Shyam-Chen
Copy link
Contributor Author

Before:

default


Add this

.mdc-list-item.mdc-ripple-surface {
  box-sizing: border-box;
  left: 0;
}

After:

default

@traviskaufman
Copy link
Contributor

@vivekmarakana the box-sizing suggestion is a good one, however, @Shyam-Chen could you clarify exactly what your issue is, and what you're trying to achieve? Is the issue that the drawer items are misaligned?

@Shyam-Chen
Copy link
Contributor Author

Shyam-Chen commented Apr 21, 2017

@mhuebert
Copy link

mhuebert commented Apr 23, 2017

I am also experiencing this problem. In a permanent drawer, adding the class mdc-ripple-upgraded to an mdc-list-item removes its left padding.

Tracking down the cause:

.mdc-permanent-drawer removes padding from .mdc-list, and adds padding to .mdc-list-item's to compensate:

.mdc-permanent-drawer .mdc-list-group, .mdc-permanent-drawer .mdc-list {
    padding-right: 0;
    padding-left: 0;
}
.mdc-permanent-drawer .mdc-list-item {
    padding: 0 16px;
}

while .mdc-ripple-upgraded assumes that it can add padding to compensate for left: -16px:

.mdc-list-item.mdc-ripple-upgraded {
    ...
    left: -16px;
    padding: 0 16px;
}

We were already using that 16px of padding to compensate for the .mdc-permanent-drawer's removal of padding from .mdc-list, so we are left with effectively zero left padding.

Below is an example. "Lists" is a mdc-list-item with ripple, "Checkbox" is identical but without a ripple.
screenshot 2017-04-24 01 28 35

@traviskaufman
Copy link
Contributor

Thanks for doing that digging @mhuebert! Submitting a fix.

@mhuebert
Copy link

mhuebert commented May 2, 2017

Fix on the drawer works great - I'm now implementing mdcSimpleMenu, and we have the same problem there because of this rule:

.mdc-simple-menu .mdc-list-group, .mdc-simple-menu .mdc-list {
    padding: 0;
}

In the screenshot below, the second ListItem in the SimpleMenu has a ripple, the first does not:

screen shot 2017-05-02 at 7 47 24 pm

I imagine the fix can be almost the same as for the drawer. (Not sure if there is a more general way to solve this)

@carlitux
Copy link

Using ripple on drawer the width is bigger than the 100% of the parent width. End detail is hidden. You can se here https://carlitux.github.io/material-toolbox

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants
@carlitux @mhuebert @traviskaufman @vivekmarakana @Shyam-Chen and others