I need assistance with integrating a uib-datepicker into a table:
<div class="table-responsive">
<table class="table table-striped" >
<thead>
<tr>
<th class="col-md-2"><span>Date</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="materiel in vm.chantier.listeMateriels track by materiel.id">
<td class="col-md-2">
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{vm.formatDate}}"uib-datepicker-popup ng-model="materiel.date"
is-open="materiel.isOpen" ng-change="vm.dateDebutChanged()" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendarMateriel($event, materiel)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Issue encountered: Before clicking : https://i.sstatic.net/Wi3w8.png
After clicking: https://i.sstatic.net/9bLze.png
The calendar appears truncated within the table borders, instead of above it. Assistance on resolving this display issue would be appreciated.