javascript - Styling Polymer Web Components

Question

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.

Answer 1

A little padding does the trick:

<style>
  #container > div {
    padding: 12px;
  }
</style>

<div layout vertical id="container">
  <div layout horizontal center>
    ...
  </div>
  <div layout horizontal center>
    ...
  </div>
  ...
</div>

I've also used the center attribute to vertical align the items on each row.

Demo: http://jsbin.com/pobiyawu/1/edit