Reputation: 2579
I am creating a simple control panel using Bootstrap and HTML5. I am having an issue where some of the elements in my form are not vertically aligning.
Here is a jsfiddle illustrating the problem along with the form html.
https://jsfiddle.net/srose/rqmu3uyr/
<form class="form-horizontal" id="control-panel" name="control-panel" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Status</label>
<div class="col-sm-9">
<div id="statusSelector" class="btn-group" data-toggle="buttons">
<label id="btnEnabled" class="btn btn-success active disabled">
<input type="radio" name="options" id="option1" autocomplete="off"> Enabled
</label>
<label id="btnDisabled" class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off"> Disabled
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Mode</label>
<div class="col-sm-9">
<label class="radio-inline">
<input name="RadioOptions" type="radio" value="view-only" checked="checked">View Only
</label>
<label class="radio-inline">
<input name="RadioOptions" type="radio" value="Save-on-motion">Save on motion
</label>
</div>
</div>
</form>
You can see 'status' and 'mode' aren't aligned.
Does anyone know what the issue is here? Also, how would I get the panel to scale to fill the whole screen when viewed on a phone screen? Currently the buttons are very small when viewed on mobile.
Thanks
Upvotes: 0
Views: 65
Reputation: 561
Bootstrap add some css to div
tag. In your first from-group
you had 2 divs instead of one in the second form-group
. You can resolve it by merging the 2 divs of the first from-group
.
And </div>
missing in first group, take care about it.
First from-group
<div class="col-sm-9">
<div id="statusSelector" class="btn-group" data-toggle="buttons">
Secondfrom-group
<div class="col-sm-9">
First from-group
merged
<div id="statusSelector" class="col-sm-9 btn-group" data-toggle="buttons">
Live example here:
https://jsfiddle.net/jvLhh6fq/
Scale
Now for the scale I recommand you this post:
Responsive website zoomed out to full width on mobile
Upvotes: 1