Prevent column-count from breaking elements' border

Question

I'm creating a layout using column-count and -webkit-column-count but I found an issue that appears multiple times.

As you can see from this image, Chrome 45 (not happening in FF) breaks elements' border, which is very strange and quite annoying. This is a bit the code where the break happens (but I don't know why it is not happening here, only difference are fonts, and absence of Mayers css reset):

body {
  line-height: 1.5;
}
form {
  -webkit-column-count: 2;
  column-count: 2;
}
label {
  display: block;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-top: 0.625em;
}
input {
  border: 1px solid green;
  border-radius: 4px;
  padding: 0.25em 0.5em;
}
label>span:first-child {
  width: 5em;
  display: inline-block;
}

<h2>CONFIG:</h2>
<form id="pop_values" action="" class="ng-pristine ng-valid">
  <label>
    <input type="checkbox">
    <span>Mobile</span>
  </label>
  <label>
    <input type="checkbox">
    <span>Animate</span>
  </label>
  <label>
    <span>Frecuency:</span>
    <input type="number">
  </label>
  <label>
    <span>Exclusions:</span>
    <input type="text">
  </label>
</form>

But it didn't work. Could you give any enlightenment?

Answer 1

Although it is not very clear (without markup) in your question, it seems your form elements (labels and inputs) are not wrapped in their respective containers and are on their own.

You are preventing break on labels only, and hence the inputs are not bound by that rule. This is the reason you are facing that problem.

Best solution would be to wrap your label-input sets in their own containing divs and apply break-inside: avoid on those divs.

Example:

* { box-sizing: border-box; }
form { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

form > div { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; }

form label, form input { display: inline-block; margin: 4px 0px; }
form input[type=text] { width: 50%; }

<form>
    <div>
        <input id="chk1" type="checkbox" /><label for="chk1">Mobile</label>
    </div>
    <div>
        <input id="chk2" type="checkbox" /><label for="chk2">Animated</label>
    </div>
    <div>
        <label for="txt1">Input 1:</label><input id="txt1" type="text" />
    </div>
    <div>
        <label for="txt2">Input 2:</label><input id="txt2" type="text" />
    </div>
    <div>
        <label for="txt3">Input 3:</label><input id="txt3" type="text" />
    </div>
    <div>
        <label for="txt4">Input 4:</label><input id="txt4" type="text" />
    </div>
    <div>
        <label for="txt5">Input 5:</label><input id="txt5" type="text" />
    </div>
    <div>
        <label for="txt6">Input 6:</label><input id="txt6" type="text" />
    </div>
</form>

Fiddle to see the effect of resizing: http://jsfiddle.net/abhitalks/jd7v0n8e/

Note: Last style rule in the above example is to prevent overflow of the inputs when the the available space is less than their default width.

Edit:

(after Op's comment)

Now that you have provided your markup, this arrangement should also work. As long as you are sure that all inputs are properly wrapped inside those labels.

See this snippet:

* { box-sizing: border-box; } 
form{
    -webkit-column-count: 2;
    column-count: 2;
}
label {
    display: block; margin: 2px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}
input {
    border: 1px solid green;
    width: 50%;
}

<form>
    <label>This: <input type="text" /></label>
    <label>This is long: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This is much longer than before: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This: <input type="text" /></label>
    <label>This: <input type="text" /></label>
</form>

And also this fiddle: http://jsfiddle.net/abhitalks/38wjpu28/3/

It seems that there must be something else going on in your markup besides what you have shown in your question.

Note 2: I would recommend going with a wrapping div and keeping the label and input separate. This would allow you greater control in case you need to change the layouts later on. (e.g. when you need to put label on top of input instead of side by side)