I am working on an Angular project with a horizontal form using Bootstrap. I have encountered a slight alignment issue with one of the date fields. The IsMessedUp datepicker input field is not aligned properly, positioned slightly to the left compared to the other input fields above it. Additionally, I would like it to match the width of the "Sixth Thing" Calendar element.
https://i.stack.imgur.com/5zeYo.png
Here is the code for the calendar element:
<div class="form-group row">
<label class="col-md-2 col-md-offset-7 control-label">IsMessedUp Date: </label>
<p class="input-group col-md-3">
<input type="text" class="form-control input-sm" uib-datepicker-popup="{{format}}"
ng-model="ismessedupdt"
is-open="ismessedupdt.opened" min-date="minDate" max-date="maxDate"
datepicker-options="dateOptions"
ng-required="true" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default input-sm" ng-click="open3()"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>View the Fiddle here: http://jsfiddle.net/k0c0e68n/