Label and checkbox with height bar
Is it possible to make the label and checkbox inline and height equal without using line-height
or any other css?
Working fiddle from line-height
(workaround) http://jsfiddle.net/yeao6ph7/3/
Script without css http://jsfiddle.net/yeao6ph7/2/
Html
<div class="form">
<form class="form-horizontal" name="myform" action="">
<div class="form-group">
<div class="col-xs-3 control-label">
<label for="inputCheckbox">Is Checked ?</label>
</div>
<div class="col-xs-9">
<div class="checkbox">
<label>
<input type="checkbox" id="inputCheckbox" value="option1"/>
</label>
</div>
</div>
</div>
</form>
</div>
Output:
Expected Result:
If css is the only option, is this the correct solution line-height: 35px;
? Since the field input
can be large
as well small
.
Thank you Jigar.
UPDATE
form-horizontal
misspelled. The problem is the same, the violins have been updated. line-height: 35px;
required for height adjustment.
UPDATE 2
There are many label
below and similar to many input
below. So checkbox
the left side won't help.
deleted <div class="checkbox">
After the CSS has loaded via bootstrap:
.checkbox, .radio {
display: block;
margin-bottom: 10px;
margin-top: 10px;
position: relative;
}
http://jsfiddle.net/yeao6ph7/12/
I added this div with a class checkbox
by following the Official Bootstrap Example
Your html can just be changed to fiddle
As long as your input is directly linked to the shortcut, you do fine with it in the shortcut container.
#inputCheckbox {
display: inline-block;
}
<div class="form">
<form class="form-horizantable" name="myform" action="">
<div class="form-group">
<div class="col-xs-3 control-label">
<label for="inputCheckbox">Is Checked ?
<input type="checkbox" id="inputCheckbox" value="option1" />
</label>
</div>
</div>
</form>
</div>