When using Bootstrap4 to create a button with a DropDown menu for each row in a DataTables grid, I encountered an issue. Upon clicking the button, the datatables footer cuts off my menu. I am using Angular5 and Bootstrap4.
Here is a screenshot of the problem:
https://i.sstatic.net/Ydztj.png
Below is the code snippet:
<table id="e-commerce-products-table" class="table dataTable">
<thead>
<tr>
<th>
<div class="table-header">
<span class="column-title">ID</span>
</div>
</th>
<th>
<div class="table-header">
<span class="column-title">Status</span>
</div>
</th>
<th>
<div class="table-header">
<span class="column-title">Date Creation</span>
</div>
</th>
<th>
<div class="table-header">
<span class="column-title">Client</span>
</div>
</th>
<th>
<div class="table-header">
<span class="column-title">Actions</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let c of dossiers'>
<td class="name">{{c.numero}}</td>
<td class="type d-none d-md-table-cell">{{c.status}}</td>
<td class="owner d-none d-sm-table-cell">{{c.dateCreation}}</td>
<td class="size d-none d-sm-table-cell">
<a class="icon-eye" data-toggle="modal" data-target="#gridSystemModal" (click)="affectationClient(c.client.idClient)"></a>
</td>
<td class="last-modified d-none d-lg-table-cell">
<div class="dropdown ">
<button type="button" class="btn btn-icon" aria-label="btnGroup" data-toggle="dropdown">
<i class="icon icon-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-right " id="myMenu" aria-labelledby="btnGroup">
<button class="dropdown-item" data-toggle="modal" data-target="#modifierDossier" (click)="affectationDossier(c)">Modifier Dossier</button>
<button class="dropdown-item" data-toggle="modal" data-target="#supprimerDosssier" (click)="affectationClient(c.client.idClient)">Supprimer Dossier</button>
<a class="dropdown-item" href="dossiers/details?id={{c.id}}">Details Dossier</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>