Menu
I'm laying out a set of checkboxes and I am running across the age-old issue of text wrapping underneath a checkbox if the text is too long.
My HTML:
<div class="right"> <form id="updateProfile"> <fieldset class="checkboxes"> <p>4. What is your favorite type of vacation?</p> <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label> <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label> <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label> <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label> <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label> <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label> <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label> <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label> <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label> <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label> <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label> </fieldset> </form> </div> My CSS:
div.right{width:580px;} form#updateProfile fieldset label{ display: block; margin-bottom: 5px; font-size: 16px; float: left; width: 33%; } See my fiddle here: http://jsfiddle.net/fmpeyton/7WmGr/
After much searching on different sites, I can't seem to find a reasonable solution. I am open for suggestions on changing my markup/styles, but I would like to keep the code as clean and semantic as possible.
Thanks!
240
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
When text wrapping is enabled for a control, text will automatically wrap inside that control when users type into it. If text wrapping is disabled, any text that exceeds the width of the control will be hidden. You can also change the way that text wraps around picture controls on the form template.
Wrap the entirety with a label which will then allow you to use style="display:none to hide the label . You also used status instead of style but by using the code above you'll do fine.
This seems to work:
http://jsfiddle.net/7WmGr/5/
I gave the label a margin-left of 18px and the checkboxes a margin-left of -18px.
Seems to work in Chrome & IE9.
div.right { width: 598px; } form#updateProfile fieldset label { display: block; margin-bottom: 5px; font-size: 16px; float: left; width: 30%; margin-left: 18px; } form#updateProfile fieldset label input[type='checkbox'] { margin-left: -18px; }<div class="right"> <form id="updateProfile"> <fieldset class="checkboxes"> <p>4. What is your favorite type of vacation?</p> <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label> <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label> <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label> <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label> <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label> <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label> <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label> <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label> <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label> <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label> <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label> </fieldset> </form> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With