Prevent column borders from element borders

Question

I am creating a layout using count-count and -webkit-column-count, but I have found a problem that appears several times.

As you can see from this image, Chrome 45 (doesn't happen in FF) violates the borders of the elements, which is very strange and quite annoying. This is a bit of code where the break occurs (but I don’t know why this does not happen here, only the difference between the fonts and the lack 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 that did not work. Could you give some enlightenment?

Answer 1

Although it is not very clear in your question (without markup), it seems that your form elements ( label and input s) are not wrapped in the appropriate containers and are not independent.

You only prevent label from breaking, and therefore input not bound by this rule. That is why you are faced with this problem.

The best solution would be to wrap your label-input sets in their own containing div and apply break-inside: avoid to those div s.

An 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. The last style rule in the example above is to prevent the input from overflowing when the available space is less than their default width.

Edit:

(after Op comment)

Now that you have provided your markup, this agreement should also work. So far, you are sure that all input correctly packed inside these label s.

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/

There seems to be something else in your markup besides what you showed in your question.

Note 2: I would recommend using a wrapper div and keeping label and input separate. This will allow you to tighten control if you need to change layouts later. (for example, when you need to put a label on top of input instead of side by side)