html - bootstrap3 form has text overlapping with dropdown -
i trying create form looks this:
what have come looks this. either can have dropdown take correct amount of space, text underneath, or have text next dropdown , gets smushed.
i'm not sure i'm doing wrong. here html:
<form class="schedulerbody form-horizontal" id="{{sourcecleaned}}"> <div class="form-group"> <label class="col-sm-3 control-label">{{t "templates.scheduler.fireevery"}}</label> <div class="col-sm-8"> <div class="form-inline"> <div class="form-group"> <select class="livesyncschedule form-control"></select> </div> <div class="form-group">{{t "templates.scheduler.seconds"}}</div> </div> </div> <div class="col-sm-offset-3 col-sm-8"> <div class="checkbox"> <label> <input type="checkbox" />{{t "templates.scheduler.enabled"}} </label> </div> </div> <div class="col-sm-offset-3 col-sm-8"> <div class="checkbox"> <label> <input type="checkbox" />{{t "templates.scheduler.persisted"}} </label> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">{{t "templates.scheduler.misfirepolicy"}}</label> <div class="col-sm-8"> <select class="misfirepolicy form-control"> <option value="fireandproceed">{{t "templates.scheduler.fireandproceed"}}</option> <option value="donothing" selected>{{t "templates.scheduler.donothing"}}</option> </select> </div> </div>
all appreciated!
the layout messed because form-group
class not handled properly. try this,
<form class="schedulerbody form-horizontal" id="{{sourcecleaned}}"> <div class="form-group"> <label class="col-sm-3 control-label">{{t "templates.scheduler.fireevery"}}</label> <div class="col-sm-8"> <div class="form-inline"> <select class="livesyncschedule form-control"></select> <span>{{t "templates.scheduler.seconds"}}</span> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-8"> <div class="checkbox"> <label> <input type="checkbox" />{{t "templates.scheduler.enabled"}} </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-8"> <div class="checkbox"> <label> <input type="checkbox" />{{t "templates.scheduler.persisted"}} </label> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">{{t "templates.scheduler.misfirepolicy"}}</label> <div class="col-sm-8"> <select class="misfirepolicy form-control"> <option value="fireandproceed">{{t "templates.scheduler.fireandproceed"}}</option> <option value="donothing" selected>{{t "templates.scheduler.donothing"}}</option> </select> </div> </div> </form>
thanks!
Comments
Post a Comment