Checkboxes don't work well in a column layout about paper-checkbox HOT 6 CLOSED

Blerg, I think this is the -webkit-column-count:4; style being weird. If I use a flexbox column layout, everything looks fine. I also only see this in Chrome and not Safari, so I'm think Chrome has a bug in its implementation of -webkit-column-count:4;

from paper-checkbox.

Yeah, even this, which just uses native elements, will make the label jump around. I will file a bug in Chrome, but I don't think there's anything we can do here :(

<div style="-webkit-column-count:4; width:400px;">
  <input type="checkbox">Checkbox<br/>
  <input type="checkbox">Checkbox<br/>
  <input type="checkbox">Checkbox<br/>
  <input type="checkbox">Checkbox<br/>
  <input type="checkbox">Checkbox<br/>
  <input type="checkbox">Checkbox<br/>
  <input type="checkbox">Checkbox<br/>
  <input type="checkbox">Checkbox<br/>
  <input type="checkbox">Checkbox<br/>
  <input type="checkbox">Checkbox<br/>
</div>

from paper-checkbox.

(added to existing bug https://code.google.com/p/chromium/issues/detail?id=530260). Closing this since unfortunately this isn't a Polymer bug.

from paper-checkbox.

Thanks for digging into it! If you don't mind - what's the equivalent flexbox layout that you used?

from paper-checkbox.

I had just hacked it to fit into 4 columns by wrapping it, but I'm not super sure what you want the end result to be:

<style is="custom-style">
.container {
  @apply(--layout-wrap);
  @apply(--layout-inline);
}
paper-checkbox {
  display: block;
  width: 350px;
}
</style>

And adding the container class to your top level div.

from paper-checkbox.

Thank you

from paper-checkbox.