Material-components-web: Drawer list with ripple

[Shyam-Chen]

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

[vivekmarakana]

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]

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

[vivekmarakana]

This is what you were looking for, right?

[Shyam-Chen]

Before:

---

Add this

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

---

After:

[traviskaufman]

@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]

http://codepen.io/Shyam-Chen/pen/aWNRWb?editors=1000

[mhuebert]

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.

[traviskaufman]

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

[mhuebert]

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:

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]

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