I am facing an issue with my datatable table where the Bootstrap toast component is not working correctly when placed above the table due to the backdrop-filter property.
The toast functions normally when placed within any other element except for the table.
Refer to the image for the actual result.
Can anyone provide a solution to this problem?
Here is the code I am using:
let id = 1234;
function addToast(message, autohide){
id++;
let html =''+
'<div id="'+ id + '" class="toast" data-autohide="'+ autohide +'" data-delay="5000" data-animation="true">'+
'<div class="toast-header">'+
'<button type="button" class="ml-auto mb-1 close" data-dismiss="toast" aria-label="Close">'+
'<span aria-hidden="true">×</span>'+
'</button>'+
'</div>'+
'<div class="toast-body">'+
'<span>'+message +'</span>'+
'</div>'+
'</div>';
$('.toast-box').append(html);
$('#'+ id).toast('show');
$('#'+ id).on('hidden.bs.toast', function () {
$(this).remove();
});
}
$(function(){
$('#records').DataTable();
addToast('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', false);
addToast('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', false);
addToast('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', false);
addToast('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', false);
});.toast-area{
position: fixed;
right: 0;
}
.toast-box{
position: absolute;
right: 0;
top: 0;
min-width: 250px;
}<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<div class="container">
<div class="toast-area" aria-live="polite" aria-atomic="true">
<div class="toast-box"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptatem quidem rem earum! Ex pariatur in, officia maiores esse doloribus earum nam necessitatibus beatae iste obcaecati reiciendis. Porro, corrupti error.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptatem quidem rem earum! Ex pariatur in, officia maiores esse doloribus earum nam necessitatibus beatae iste obcaecati reiciendis. Porro, corrupti error.</p>
<div class="table-responsive">
<table class="table table-striped" id="records">
<thead>
<th>Nome</th>
<th>User</th>
<th>Age</th>
</thead>
<tbody>
<tr>
<td>Jonh Doe</td>
<td>john</td>
<td>33</td>
</tr>
<tr>
<td>Jonh Doe</td>
<td>john</td>
<td>33</td>
</tr>
<tr>
<td>Jonh Doe</td>
<td>john</td>
<td>33</td>
</tr>
</tbody>
</table>
</div>
</div>