Reputation: 302
I have changed from Bootstrap 3.0.0 to 3.2.0 this morning because I needed some of the new features for my web application. Everything seemed to work as expected until I observed an issue with the vertical alignment of checkboxes in a .form-horizontal
form.
An example is available at http://www.bootply.com/AYN64feYze. The markup for this minimum example is:
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">With label text</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> label text
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Without label text</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
</div>
</div>
</div>
If a checkbox has no following text it is shifted below the row it should appear in.
Is there a solution to this problem? Since I already have the leading label I do not need a following text for my checkboxes. My current workaround is adding text to the <label>
that contains the <input type="checkbox">
and use the background color as the font color to hide the text.
Thank you for your help.
Upvotes: 8
Views: 42074
Reputation: 536
This worked for me:
<div class="form-group">
<div class="col-lg-3">
<label class="pull-right" for="MyCheckBox">My Checkbox</label>
</div>
<div class="col-lg-9">
<input type="checkbox" name="MyCheckBox">
</div>
</div>
First, I had to remove the <div class='checkbox'>
element. I then made the following changes to the checkbox label element:
<div class="col-lg-3"></div>
I ended up with a checkbox that aligned with the other inputs horizontally and with its label vertically.
Upvotes: 3
Reputation: 2896
If you don't need following text for the checkboxes, why not just remove the <label>
surrounding the checkboxes. Like so.
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="check1">With label text</label>
<div class="col-sm-10">
<div class="checkbox">
<input type="checkbox" id="check1">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="check2">Without label text</label>
<div class="col-sm-10">
<div class="checkbox">
<input type="checkbox" id="check2">
</div>
</div>
</div>
</div>
This code appeared to work in your Bootply when I tried it.
And remember if you have a label to use the for
attribute for screen readers and to make it easier for your users (they can just click the label instead of the checkbox).
Upvotes: 0
Reputation: 12258
I'm not sure if this will affect the rest of your form layout, but the issue seems to be resolved if you change the display attribute of <label>
(currently set to inline-block
) to:
label{
display:inline;
}
Here's an updated Bootply. Hope this helps! Let me know if you have any questions.
Upvotes: 7