Angular UI Bootstrap Input-Group-Button - darn floating button

Problem

I have a form that i have just added a bootstrap datepicker to and using an input-group-button. The problem I have is that the button floats off to the right at the extent of the containing div. The button in question is the button to the right of TargetDate.

I have been following instructs at TutorialsPoint

JSFiddle here JSFiddle

<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 class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-10">
                                <input ng-model="formData.name" type="text" class="form-control" name="name" ng-required="true"> <span class="error" ng-show="submitjobform.name.$error.required">
                                    Required!</span>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="description" class="col-sm-2 control-label">Description</label>
                            <div class="col-sm-10">
                                <textarea ng-model="formData.description" class="form-control" name="description" ng-required="true"></textarea> <span class="error" ng-show="submitjobform.description.$error.required">
                                        Required!</span>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="category" class="col-sm-2 control-label">Category</label>
                            <div class="col-sm-10">
                                <select ng-model="formData.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>
                        <div class="form-group">
                            <label for="assignee" class="col-sm-2 control-label">Assignee</label>
                            <div class="col-sm-10">
                                <select ng-model="formData.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>
                        <div class="form-group">
                            <label for="targetDate" class="col-sm-2 control-label">Target Date</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input name="targetDate" type="text" class="form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.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"> <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-sm-10 -->
                        </div>
                        <!-- form group -->
                        <div class="form-group">
                            <div class="col-sm-2">
                                <input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="widget-foot">
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</section>
</section>

Any assistance gratefully appreciated

Simon

Problem courtesy of: Simon Taylor

Solution

There's a couple things that can help you here:

Columns are meant to be wrapped by rows. The default bootstrap grid is a grid of 12 columns.

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

So with that in mind, you can see how you can control the placement PER row of your elements.

As it stands your last div is set to a col-sm-10. This column is holding your input for your target date as well as the button that's misbehaving.

Below is a modification of your troubled area with a fiddle. You had a span tag open too long as well as missing a "form-control" class. http://jsfiddle.net/Levy0k2f/

<div class="form-group">
    <label for="targetDate" class="col-sm-2 control-label">Target Date</label>
    <div class="row">
        <div class="col-sm-3">
            <div class="input-group">
                <input name="targetDate" type="text" class="form-control form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.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"> <span class="input-group-btn"></span> 
            </div>
        </div>
    <div class="col-sm-3">
        <button type="button" class="btn btn-default" ng-click="vm.open($event)">   <i class="glyphicon glyphicon-calendar"></i></button>
    </div>
</div>

Update for fixing of button, the button was outside the span class.

http://jsfiddle.net/k0f598hr/

<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>
Solution courtesy of: Joe Swindell

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.