title: Bootstrap4 dropdown hidden by datatables
body: <p>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</p>
  
  <p>pic of the problem  :</p>
  
  <p><a href="https://i.stack.imgur.com/Ydztj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ydztj.png" alt="enter image description here"></a></p>
  
  <p>code : </p>
  
  <pre><code>&lt;table id="e-commerce-products-table" class="table dataTable"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;
                                  &lt;div class="table-header"&gt;
                                      &lt;span class="column-title"&gt;ID&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/th&gt;
                              &lt;th&gt;
                                  &lt;div class="table-header"&gt;
                                      &lt;span class="column-title"&gt;Status&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/th&gt;
                              &lt;th&gt;
                                  &lt;div class="table-header"&gt;
                                      &lt;span class="column-title"&gt;Date Creation&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/th&gt;
                              &lt;th&gt;
                                  &lt;div class="table-header"&gt;
                                      &lt;span class="column-title"&gt;Client&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/th&gt;
                              &lt;th&gt;
                                  &lt;div class="table-header"&gt;
                                      &lt;span class="column-title"&gt;Actions&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr *ngFor='let c of dossiers'&gt;
                              &lt;td class="name"&gt;{{c.numero}}&lt;/td&gt;
                              &lt;td class="type d-none d-md-table-cell"&gt;{{c.status}}&lt;/td&gt;
                              &lt;td class="owner d-none d-sm-table-cell"&gt;{{c.dateCreation}}&lt;/td&gt;
                              &lt;td class="size d-none d-sm-table-cell"&gt;
                                  &lt;a class="icon-eye" data-toggle="modal" data-target="#gridSystemModal" (click)="affectationClient(c.client.idClient)"&gt;&lt;/a&gt;
                              &lt;/td&gt;
                              &lt;td class="last-modified d-none d-lg-table-cell"&gt;
                                  &lt;div class="dropdown "&gt;
                                      &lt;button type="button" class="btn btn-icon" aria-label="btnGroup" data-toggle="dropdown"&gt;
                                          &lt;i class="icon icon-dots-vertical"&gt;&lt;/i&gt;
                                      &lt;/button&gt;
                                      &lt;div class="dropdown-menu dropdown-menu-right " id="myMenu" aria-labelledby="btnGroup"&gt;
                                          &lt;button class="dropdown-item" data-toggle="modal" data-target="#modifierDossier" (click)="affectationDossier(c)"&gt;Modifier Dossier&lt;/button&gt;
                                          &lt;button class="dropdown-item" data-toggle="modal" data-target="#supprimerDosssier" (click)="affectationClient(c.client.idClient)"&gt;Supprimer Dossier&lt;/button&gt;
                                          &lt;a class="dropdown-item" href="dossiers/details?id={{c.id}}"&gt;Details Dossier&lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>