CODEWITHSUNDEEP
htmlcsstwitter-bootstrapangular-ui-bootstrap
Aniruddha Bhondwe
Aniruddha Bhondwe

Reputation: 831

UI bootstrap datepicker not aligned

I have a UI-Bootstrap datepicker

 <div class="col-md-2">

    <label for="datepicker">Select Date<span class="compulsary">*</span></label><br>

     <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/>
     <span class="input-group-btn">
     <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
     </span>

</div>

This is the css to the input field

#datepicker{
    height: 50px;
    width: 60%;
}

The calendar button appears beneath the input field, and not besides it, as if a <br> has been applied to it. I want the button to appear adjacent to the field. How can I achieve this?

Upvotes: 0

Views: 2695

Answers (2)

Sagar Ramachandrappa
Sagar Ramachandrappa

Reputation: 1461

I think you are looking for horizontal forms. 

<form class="form-horizontal">
    <div class="form-group">
        <label for="datepicker">Select Date<span class="compulsary">*</span></label>
        <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/>
    </div>
</form>

Upvotes: 0

AwesomeGuy
AwesomeGuy

Reputation: 1089

You should be using input groups according to Bootstrap. 

<div class="col-md-2">

    <label for="datepicker">Select Date<span class="compulsary">*</span></label><br>

    <div class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </div>

Upvotes: 2

Related Questions