Material-components-web: Alignment issues with mdc-checkbox with an mdc-list-item

[djensen47]

Bug

mdc-checkbox causes alignment issues when used with mdc-list-item

What MDC-Web Version are you using?

0.24.0

What browser(s) is this bug affecting?

Chrome, Firefox, Edge

What OS are you using?

Windows 10

What are the steps to reproduce the bug?

1. Create an two-line mdc list
2. Include a span for mdc-list-item__start-detail and mdc-list-item__end-detail
3. Put a checkbox in each span

_or_

1. Include two checkboxes
2. Use the class mdc-list-item__start-detail on one checkbox and mdc-list-item__end-detail on the other

What is the expected behavior?

Checkboxes are properly aligned and shaped.

What is the actual behavior?

Checkboxes are misaligned in the start-detail and end-detail sections when wrapped with <span class="mdc-list-item__start-detail"> or <span class="mdc-list-item__end-detail">

Checkboxes are misshaped and affect the alignment of the mdc-list-item

https://codepen.io/anon/pen/vWJWYL

[djensen47]

In the first example, wrapped, it's off by 8px on the top and 8px on the left.

[kfranqueiro]

Incidentally, the mdc-list--avatar-list modifier makes the start detail element the exact right size to fit our checkboxes, but that doesn't solve the end detail case, which is also supposed to be possible.

Thanks for reporting this; I'm tracking it as a bug, as I think it might be worth examining whether we can make our existing styles more flexible rather than needing to add special cases for different types of components that are allowed in the start and end regions.

[djensen47]

I didn't think to try avatar. Thanks for the suggestion, it's much better than my position workaround.

[moog16]

Per commit: https://github.com/material-components/material-components-web/commit/5dabcdf72606e182d44bdaddd386e47ae2da0d77#diff-d5738923465a810c2132e773f88f3d23, __start-detail has been renamed to __graphic, and __end-detail has been renamed to __meta.

I have updated the codepen here https://codepen.io/moog16/pen/wpZYOw?editors=1000. I do see an issue with alignment when the text is overflowing. I looked at spec and it doesn't have anything on the max-width, or if it should take the width of the longest row. I'm reaching out to the designer.

[moog16]

Checked with designer - Text should ellipsis that overflows. It turns out that the ellipsis mixin was being used in mdc-list.scss, but not being applied. Fixing that bug.