I'm dealing with the code below:
<ul class="dropdown-menu custom-scroll dropdown-label custom-width" role="menu" aria-labelledby="btn-append-to-body"
ng-show="!display"
>
<li role="menuitem">
<a href="" ng-click="$event.stopPropagation()">Start Time
<div class="input-group">
<input type="text" id="timepicker1" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
ng-model="abcd.startTime" ng-change="abcd.get('startTime')"
/>
<span class="input-group-addon" ng-click="abcd.startTimeClicked = true"><i class="glyphicon glyphicon-time"></i></span>
</div>
<timepicker ng-show="abcd.startTimeClicked" ng-model="abcd.startTime" ng-change="abcd.getETACount('startTime')" data-hour-step="1" data-minute-step="5" show-meridian="true" ></timepicker>
</a>
</li>
<li role="menuitem">
<a href="" ng-click="$event.stopPropagation()">End Time
<div class="input-group">
<input type="text" id="timepicker2" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
ng-model="abcd.endTime"
ng-change="abcd.getETACount('endTime');"
/>
<span class="input-group-addon" ng-click="abcd.endTimeClicked = true"><i class="glyphicon glyphicon-time"></i></span>
</div>
<timepicker ng-show="abcd.endTimeClicked" ng-model="abcd.endTime" ng-change="abcd.getETACount('endTime')" data-hour-step="1" data-minute-step="5" show-meridian="true" ></timepicker>
</a>
</li>
<!--Clear div-->
<li role="menuitem" class="btn btn-default buttonli"
>
<a href="" ng-click="abcd.clearTimePicker($event);
abcd.startTimeClicked = false; abcd.endTimeClicked = false">
<p>
<span class="clear-all-btn">Clear</span>
<span class="drop-down-clear"> – ETA</span>
</p>
</a>
</li>
</ul>When I attempt to center-align the ":" (colon) between hour and minute, it affects other table cells as shown in the screenshot. How can I address this issue?
https://i.sstatic.net/kGh9q.png
AJS:1.3 version