Bootstrap4 dropdown hidden by datatables

Question

I'm using Bootstrap4 to create a button with a DropDown menu for each row in a DataTables grid, but when i click the button , datatables footer cut my menu i'm using angular5,bootstrap4. i already try overflow: visible !important for the dropdown menu but it doesn't work

pic of the problem :

code :

<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>

Answer 1

First:

.dropdown-menu {   position: fixed; }

Add dropdown-button id to button, so it will be:

<button type="button" class="btn btn-icon" id="dropdown-button" aria-label="btnGroup" data-toggle="dropdown">

And then:

$('#dropdown-button').click(function() {
  dropDownFixPosition($('#dropdown-button'), $('.dropdown-menu'));
});
function dropDownFixPosition(button, dropdown) {
  var dropDownTop = button.offset().top + button.outerHeight();
  dropdown.css('top', dropDownTop + "px");
  dropdown.css('left', button.offset().left + "px");
}