jquery - bootstrap input-group not grouping -
i'm trying use input-group
group these 2 divs looks this, first item being dropdown select.
what looks now
i've heard bootstrap doesn't work using select inside of here. possible in here?
how can 2 being next each other first pic?
p.s. @ structure please, remove names of stuff because proprietary.
thanks!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group"> <div class="col-md-4 col-sm-3" ng-init="vm.current = vm.interval"> <select class="form-control" ng-model="vm.current" ng-options="interval.set interval in vm.intervals"></select> </div> <ng-form name="intervalsform"> <div class="col-md-5 col-sm-9" ng-repeat="interval in vm.intervals" ng-show="vm.current == interval"> <ng-form name="singleform"> <input type="text" class="form-control" placeholder="hh:mm:ss" name="single" id="interval" ng-model="vm.interval" ng-pattern="/^\d{2}:\d{2}:\d{2}$/" ng-class="{inputerror: single.interval.$error.pattern && intervalform.interval.$dirty || single.interval.$invalid || vm.settings.$submitted && intervalform.interval.$invalid}" required/> </ng-form> </div> </ng-form> <span class="input-error-span" ng-show="(intervalsform.$dirty || intervalsform.$invalid) && intervalsform.$invalid">{{ vm.validationmessages.intervalhhmm }}:ss</span> </div>
you can below:
.form-control .form-control { border:0; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group"> <span class="input-group-addon"> <select></select> </span> <input type="text" class="form-control"> </div>
try customize code looks this.
Comments
Post a Comment