When implementing a modal within a table that is inside a table-responsive container, the modal appears behind the table.
To address this issue, I have tried using table-backdrop="false", but it is not an ideal solution as it restricts the full functionality of the modal. Altering the bootstrap CSS also provides a temporary fix, but I am seeking a foolproof bootstrap method without any customization to resolve this problem.
The root cause:
The problem can be resolved by applying overflow-x: auto;, but this hinders smooth scrolling on mobile devices. However, adding -webkit-overflow-scroll: touch enables smooth scrolling, but it results in the same issue as with table-responsive
Example:
<div class="table-responsive"> //this causes the issues
<table class="table align-items-center">
<thead>
<tr>
<th scope="col"></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
</tr>
</tfoot>
<tbody class="list">
<tr>
<td>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal">
View Order
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table">
...
</table>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
The modal will appear grayed out and unclickable or unable to close. Removing table-responsive from the first table (top div class) allows it to function correctly. By manually applying
overflow-x: auto; -webkit-overflow-scroll: touchIt's essential for the modal to stay in the current location as the information displayed depends on the loop from the table.
Is there a workaround for this issue? Mobile responsiveness of the table is crucial.
I aim to have a responsive table with smooth scrolling capabilities.