<!-- The Server Modal -->
<div class="modal" id="serverModal">
<div
class="modal-dialog"
style="max-width: 80%;overflow-y: initial !important;"
>
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">
User # {{ globals.currentUser }}
</h4>
</div>
<!-- Modal body -->
<div
class="modal-body"
style="max-height: calc(100vh - 200px);
overflow-y: auto;"
>
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>
<div class="row">
<div class="col-6" style="width:150px;">
ObsoleteServerActionDate
</div>
<div class="form-group col-6">
<input
type="text"
placeholder="DOJ"
class="form-control"
bsDatepicker
[bsConfig]="{
dateInputFormat: 'MM/DD/YYYY',
containerClass: 'theme-dark-blue'
}"
/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button
type="button"
class="btn btn-primary"
data-dismiss="modal"
(click)="SaveServer()"
>
Save
</button>
<button
type="button"
class="btn btn-danger"
data-dismiss="modal"
(click)="CancelServer()"
>
Cancel
</button>
</div>
</div>
</div>
</div>
When I trigger the modal, the date-picker element within the table hides behind the modal and I have tried adjusting its z-index with no success. Why is this happening?