Geek Answers Handbook

Formatting Elements in Columns and Rows

To avoid wheel reuse, I create the form using the CakePHP form helper, which creates the following markup:

<div class="input select"><label for="ReportFruit">Fruit</label> <input type="hidden" name="data[Report][Fruit]" value="" id="ReportFruit" /> <div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="0" id="ReportFruit0" /><label for="ReportFruit0">Banana</label></div> <div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="1" id="ReportFruit1" /><label for="ReportFruit1">Apple</label></div> <div class="checkbox"><input type="checkbox" name="data[Report][Fruit][]" value="2" id="ReportFruit2" /><label for="ReportFruit2">Pear</label> ... </div> </div>​

What generates a bunch of flags in this format:

 [] Banana [] Apple [] Pear [] ...

I would like to format them so that they display like this: (ideally, I could still set the number of options per line, but if that is also not very good)

 [] Banana [] Apple [] Pear [] Mango [] Lemon [] ...

Can I only do this with CSS, or will I need to manipulate the DOM with JS (or change the markup from PHP to its output)?

+4
source share
2 answers

You can use the following CSS:

 div.checkbox { float: left; width: 31%; margin-right: 1% }

(1% - for rounding, reduce the width and increase the margin-right as you wish. You can also use pixel values)

This will distribute the flags and their labels in three columns. However, with long shortcuts that wrap over multiple lines, you may get distribution problems (try to understand what I mean).

To prevent this, give every third column an ​​additional newline class:

 <div class="checkbox newline">

and define in CSS:

 div.checkbox.newline { clear: left }
+10
source

The count column property in CSS is very useful. If you put a line break after each form element, you can make a pretty clean presentation. In addition, by adding <span style="white-space: nowrap;"> , it holds the label attached to the checkbox element

 <!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count: 6; /* Chrome, Safari, Opera */ -moz-column-count: 6; /* Firefox */ column-count: 6; } </style> </head> <body> <p>Here are a bunch of check boxes and their labels laid out nicely <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p> <div class="newspaper"> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Banana</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Apple</label></span><br/> <span style="white-space: nowrap;"><input type="checkbox" name="data" value="some value" id="some id" /><label for="Fruit">Pear</label></span><br/> </div> </body> </html>
0
source

More articles:


All Articles