html - bootstrap3 form has text overlapping with dropdown -


i trying create form looks this: mockup

what have come looks this. either can have dropdown take correct amount of space, text underneath, or have text next dropdown , gets smushed. reality

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

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -