- This topic is empty.
-
AuthorPosts
-
January 6, 2014 at 9:52 am #10235londonParticipant
I’ve got a checkbox group. Which are centrally aligned with checkboxes on top and text below. Here is what I mean :
So I want to align
So each checkbox + label is wrapped in a div with class
choice
. Allchoice
divs are part of div withadditional-info
.choice
divs are inline-block elements with fixed width.How do I align
div
choice to be in the same height as the first one?I’ve tried setting the
additional-info
position to relative andchoice
to absolute. But then they overlap each other so that wasn’t good.Also tried setting the
choice
div display to inline but then the current layout breaks and divs are displayed in the middle in three rows.Also tried to set
additional-info
display to table-cell and adding vertical-align top but that didn’t work either.What else can I try? any suggestions is welcome
Update :
Here is my HTML :
<div class="additional-info"> <p class="text required control-label"> Additional info </p> <div class="input boolean optional certificate"><input name="user[certificate]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="certificate"><input class="boolean optional require-one" id="certificate" name="user[certificate]" type="checkbox" value="1">I've got a valid certificate and permits</label></div> <div class="input boolean optional no_garden"><input name="user[no_garden]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="no_garden"><input class="boolean optional require-one" id="no_garden" name="user[no_garden]" type="checkbox" value="1">I don't have garden</label></div> <div class="input boolean optional has_garden"><input name="user[has_garden]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="has_garden"><input class="boolean optional require-one" id="has_garden" name="user[has_garden]" type="checkbox" value="1">I have a garden</label></div> </div>
Some css :
.additional-info { position: relative; } .additional-info div { width: 32.6%; display: inline-block; text-align: center; } input[type="checkbox"] { float: none; display: block; margin: 0 auto; }
January 6, 2014 at 10:01 am #10236bobfishParticipantI have done an inline-block level based on what you said above. Using a set width on the parent div and then child elements forces the items to stack rather than appear in a horizontal list.
<div style="display:inline-block; width:150px;"> <div style="display:inline-block; width:150px;"><input /></div> <div style="display:inline-block; width:150px;"><input /></div> <div style="display:inline-block; width:150px;"><input /></div> <div style="display:inline-block; width:150px;"><input /></div> </div>
Worth trying to see if it works for your form?
(I know I’ve done it here as inline-style, but this is just as an example I quickly put together)
January 6, 2014 at 10:03 am #10238mr.-alienParticipantYou can take a look here, I’ve made it from scratch…
So what I did here is, I’ve used
display: table;
for the container element and am usingdisplay: table-cell;
for the childdiv
and as the childdiv
are now table cells, I usedvertical-align: top;
so that the elements align to thetop
in those cellssection { display: table; width: 100%; } section > div { vertical-align: top; display: table-cell; width: 33%; text-align: center; }
<h4>Additional Info</h4> <section> <div> <input type="checkbox" /><br /> <label for="">I've got a valid certificate permits</label> </div> <div> <input type="checkbox" /><br /> <label for="">I've got a valid certificate</label> </div> <div> <input type="checkbox" /><br /> <label for="">I certificate</label> </div> </section>
January 6, 2014 at 10:09 am #10237nkmolParticipantWhy not use a simple float to get rid of the remaining ‘white space’:
.additional-info div { width: 32.6%; /*display: inline-block;*/ text-align: center; float: left; }
.additional-info { position: relative; } .additional-info div { width: 32.6%; /*display: inline-block;*/ text-align: center; float: left; } input[type="checkbox"] { float: none; display: block; margin: 0 auto; }
<div class="additional-info"> <p class="text required control-label">Additional info</p> <div class="input boolean optional certificate"> <input name="user[certificate]" type="hidden" value="0"> <label class="boolean optional control-label checkbox" for="certificate"> <input class="boolean optional require-one" id="certificate" name="user[certificate]" type="checkbox" value="1">I've got a valid certificate and permits</label> </div> <div class="input boolean optional no_garden"> <input name="user[no_garden]" type="hidden" value="0"> <label class="boolean optional control-label checkbox" for="no_garden"> <input class="boolean optional require-one" id="no_garden" name="user[no_garden]" type="checkbox" value="1">I don't have garden</label> </div> <div class="input boolean optional has_garden"> <input name="user[has_garden]" type="hidden" value="0"> <label class="boolean optional control-label checkbox" for="has_garden"> <input class="boolean optional require-one" id="has_garden" name="user[has_garden]" type="checkbox" value="1">I have a garden</label> </div> </div>
-
AuthorPosts
- You must be logged in to reply to this topic.