How would you go about styling or refactoring this list, so that the clickable areas of the checkboxes do not interfere with each other? Is there a grouping container I am not aware of?
<div layout vertical>
<div layout horizontal>
<paper-checkbox></paper-checkbox>
<paper-item label="item 1"></paper-item>
</div>
<div layout horizontal>
<paper-checkbox></paper-checkbox>
<paper-item label="item 2"></paper-item>
</div>
<div layout horizontal>
<paper-checkbox></paper-checkbox>
<paper-item label="item 3"></paper-item>
</div>
</div>
The checkboxes should be neatly aligned with the paper-item's label (like icons in an icon-button) and of course not interfering with each other or the item.
So far I didn't have to use any css for my prototype and now checkboxes are breaking everything.
See Question&Answers more detail:os