css - Bootstrap Input Group pushes control little to left -
i trying layout form using bootstrap 3 reason input pushed left. markup looks
<div class="jumbotron"> <form name="invoiceform" class="form-horizontal" role="form" data-toggle="validator"> <div class="form-group"> <label class="control-label col-sm-3" for="txt_job_date" >date work performed</label> <p class="input-group col-sm-3"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="mindate" max-date="'2015-06-22'" datepicker-options="dateoptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="close" id="txt_job_date" ng-model="job_date" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> <div class="form-group"> <label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >ref no</label> <div class="col-sm-2"> <input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123rte" required=""> </div> <div role="alert"> <span class="error has-error alert-danger" ng-show="invoiceform.txt_job_ref_no.$error.required"> ref no required!</span> </div> </div> </form> </div> many in advance!
this should help. wrap labels , elements in cols, , form in .container inside .jumbotron. over-complicating layout.
<div class="jumbotron"> <div class="container"> <form name="invoiceform" class="form-horizontal" role="form" data-toggle="validator"> <div class="col-sm-12"> <div class="form-group"> <label class="control-label" for="txt_job_date">date work performed</label> <div class="input-group"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="mindate" max-date="'2015-06-22'" datepicker-options="dateoptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="close" id="txt_job_date" ng-model="job_date" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </div> </div> </div> <div class="col-sm-12"> <div class="form-group"> <label class="control-label" for="txt_job_ref_no" required-asterix="" >ref no</label> <input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123rte" required=""> </div> </div> </form> </div> </div> http://jsfiddle.net/j8x15dbs/1/
edit: missed part form being horizontal. added new code below reflect that.
this has layout you're looking for
<div class="jumbotron"> <div class="container"> <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-3" for="txt_job_date">date work performed</label> <div class="col-sm-7"> <div class="input-group"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="mindate" max-date="'2015-06-22'" datepicker-options="dateoptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="close" id="txt_job_date" ng-model="job_date" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">ref no</label> <div class="col-sm-7"> <input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123rte" required="required"> </div> </div> </form> </div> </div> http://jsfiddle.net/j8x15dbs/2/
a real easy thing - , great way learn - copy examples off of bootstrap's site , replace values yours. :)
Comments
Post a Comment