Input-group-btn is floating from right of field

Question

The input-group-btn for the targetDate element stays pinned to the right hand side of the input group irrespective of screen width until I add in the autogenerated CSS that comes with the hottowel generator. I need some assistance in working out what aspect of CSS is affecting the behaviour.

Check out this jsfiddle
Tried all 3 sizes of grid layout to no avail but i dont think that is the issue.

<section class="mainbar">
<section class="matter">
    <div class="container">
        <div class="row">
            <div class="widget wviolet">
                <div ht-widget-header title="{{vm.title}}"></div>
                <div class="widget-content user">

                    <form name="submitjobform" novalidate  id="submitjobform" ng-submit="vm.processForm()">
                    <div class="form-group">
                        <div class="row">
                            <label for="name" class="col-lg-2 control-label">Name</label>
                            <div class="col-lg-10">
                                <input ng-model="vm.submitjobform.name" type="text" class="form-control" name="name" ng-required="true" >
                                <span class="error" ng-show="submitjobform.name.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                        </div> <!--  </div>  row -->
                   </div> <!--  </div>  form-group -->
                   <div class="form-group">
                        <div class="row">
                            <label for="description" class="col-lg-2 control-label">Description</label>
                            <div class="col-lg-10">
                                <textarea  ng-model="vm.submitjobform.description" class="form-control" name="description" ng-required="true" ></textarea>
                                <span class="error" ng-show="submitjobform.description.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                        </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group -->  
                    <div class="form-group">
                        <div class="row">
                            <label for="category" class="col-lg-2 control-label">Category</label>
                            <div class="col-lg-10">
                                <select ng-model="vm.submitjobform.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select>
                                <span class="error" ng-show="submitjobform.category.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                          </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group --> 
                    <div class="form-group">
                        <div class="row">
                            <label for="assignee" class="col-lg-2 control-label">Assignee</label>
                            <div class="col-lg-10">
                                <select ng-model="vm.submitjobform.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select>
                                <span class="error" ng-show="submitjobform.assignee.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                            </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group -->
                     <div class="form-group">   
                        <div class="row">
                            <label for="targetDate" class="col-lg-2 control-label">Target Date</label>
                            <div class="col-lg-8">
                                <!-- <div class="col-lg-4"> -->
                                    <div class="input-group">
                                        <input name="targetDate" type="text" class=" form-control" datepicker-popup="{{vm.format}}" ng-model="vm.submitjobform.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> 
                                        </input>
                                        <span class="input-group-btn">
                                            <!-- " -->
                                            <button type="button" class="btn btn-default" ng-click="vm.open($event)">
                                                <i class="glyphicon glyphicon-calendar"></i>
                                            </button>
                                        </span>
                                    </div> <!--input group -->
                                <!-- </div> /col-lg-4  -->
                            </div>  <!--/col-lg-8 -->
                        </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group -->     
                        <div class="form-group">
                            <div class="row">
                                <div class="col-lg-2">
                                    <input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
                                </div>  <!--/col-lg-2 -->
                            </div>
                        </div>
                        <div>
                        <tt>name = {{vm.submitjobform.name}}</tt><br/>
                        <tt>desc = {{vm.submitjobform.description}}</tt><br/>
                        <tt>category = {{vm.submitjobform.category.name}}</tt><br/>
                        <tt>assignee = {{vm.submitjobform.assignee.name}}</tt><br/>
                        <tt>targetdate = {{vm.submitjobform.targetDate}}</tt><br/>
                        </div>
                    </form>
                    </div> <!-- content-user div -->
                <div class="widget-foot">
                    <div class="clearfix"></div>    
                </div>
            </div> <!-- widget violet -->
            </div> <!-- row div -->
        </div> <!-- container div -->
    </section>
</section>

Thanks

Simon

Answer 1

http://jsfiddle.net/voykuL65/

I assume you're using bootstrap as you import it in your css on your fiddle.

The main issue is you aren't including bootstrap JS as well. If you delete your CSS in your fiddle and switch the framekwors & extensions to jquery 2.1 and select Bootstrap 3.2 your code looks fine.

Another point to remember is always design bootstrap smallest up.

You've got everything

class="col-lg-2" 

You might have just been tinkering, but remember to start with xs/sm and move larger.

There is also a stray </input> Kill him as well.