After purchasing a custom Metro theme from the John Papa AngularJS/Breeze courses on Pluralsight, everything was running smoothly until I attempted to integrate a Bootstrap 3 date picker into the mix. Unfortunately, right off the bat, it looked quite messy.
I noticed that the font-awesome icon was slightly smaller than the input box and the popup had inconsistent column widths, strange borders, and lacked a background, among other issues.
<div class="col-xs-6">
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="{{vm.dateFormat}}"
ng-model="vm.startDate"
is-open="vm.openedStart"
max-date="{{vm.endDate | date: 'yyyy-MM-dd'}}"
datepicker-options="{{vm.dateOptions}}"
ng-required="true"
show-button-bar="false"
show-weeks="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openStart($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
It seems this issue arises whenever I attempt to use a custom bootstrap style that I've obtained, indicating that I may be missing some key understanding of how custom style sets function.
Considering I have a custom style in place, what steps should I take to reset the datepicker's style so it appears more 'default'? Clearly, I need to locate the CSS for it, and while I have a customtheme.css file, it doesn't contain much information regarding the .ui-datepicker class or provide an explanation for the lined calendar design.
Could anyone offer advice or guidance on how to resolve these issues (specifically the icon and calendar layout), or more broadly, address problems that arise when utilizing custom themes?