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

Question

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

Joe Swindell · Accepted Answer · 2015-01-06 18:32:43Z

1

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>

edited Jan 6, 2015 at 18:32

answered Jan 6, 2015 at 17:30

Joe Swindell

6721 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Simon Taylor Over a year ago

I didnt add the row divs as i read somewhere that if you have a form-horizontal class it wasnt necessary. The span mod made the difference. New jsfiddle here jsfiddle.net/setuk/ju2y1on7/20. Can you advise as to why the button it not aligned with the other field in the input group?

Simon Taylor Over a year ago

ok that is great thanks. In trying that out i see where the original problem came from. I was trying to reduce the size of the date field and so modified the width of a specific class i applied to the date field jsfiddle.net/setuk/23wvh8cm. If I wanted to reduce the width of the field and keep the button appended to the end of it what do you suggest. Sorry for the newbie questions.

Joe Swindell Over a year ago

The <div> right before the <input name="targetDate"> give it a class <div class="input-group col-sm-4">

Simon Taylor Over a year ago

Refactored the HTML using <div class="row">. Removed form-horizontal. Lays out ok in jsfiddle without all the specific CSS for the project (using hottowel). Then when i add them back in jsfiddle.net/setuk/bscnvzgo I get the same issue with the button floating off to the right. Any guidance as to what CSS statement is affecting it. Without the specific CSS you can grow and shrink the page and the button stays glued to the end of the input box. Also tried different grid sizes, sm,md, lg to no avail.

Joe Swindell Over a year ago

You should make a new question for that. These comments will be purged.

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related