title: Dropdown in dataTables
body: <p>First of all, I tried to resolved my problem with</p>
  
  <p><a href="https://stackoverflow.com/questions/26018756/bootstrap-button-drop-down-inside-responsive-table-not-visible-because-of-scroll">Bootstrap button drop-down inside responsive table not visible because of scroll</a></p>
  
  <p>and </p>
  
  <p><a href="https://stackoverflow.com/questions/27081082/bootstrap-dropdown-menu-within-a-responsive-table">Bootstrap dropdown menu within a responsive table</a></p>
  
  <p>but no way has functioned.</p>
  
  <p><strong>Issue</strong> : When I click on gear button I want that the dropdown appears above the dataTables and not IN the table. </p>
  
  <p>Note that my table is a dataTables (<a href="https://datatables.net" rel="nofollow noreferrer">https://datatables.net</a>) initialized like that </p>
  
  <pre><code>$('#table_fours_send').DataTable({
      responsive: true,
      scrollX: true,
      sScrollX: '100%',
      paging: false,
      dom: 't&lt;"margin-dataTable-bottom"&lt;"pull-left margin-dataTable-pagination"&gt;&gt;'
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ut3Kt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ut3Kt.png" alt="problem"></a></p>
  
  <p>Html code for my dropdown button </p>
  
  <pre><code>    &lt;div class="form-group col-sm-2 no-padding-left no-padding-right"&gt;
          &lt;div class="dropdown inline-block"&gt;
              &lt;i class="fa fa-cog fa-lg padding-gear pointer dropdown-toggle" id="dropdownSend" 
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;&lt;/i&gt;
              &lt;ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownSend"&gt;
                  &lt;li&gt;&lt;a href="#" data-toggle="modal" data-target="#m_add_contact"&gt;{{'label.add_contact'|trans()}}&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" data-toggle="modal" data-target="#m_add_update_contact"&gt;{{'label.update_contact'|trans()}}&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;            
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>The better result</strong> is from the first link (<a href="https://stackoverflow.com/a/34211851/5027172">https://stackoverflow.com/a/34211851/5027172</a>)
  <a href="https://i.stack.imgur.com/HYuEt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HYuEt.png" alt="enter image description here"></a></p>
  
  <p><strong>But</strong> I don't want to push with padding but rather showing the dropdown above the table.</p>
  
  <p>Any ideas ? Needs more informations ?</p>
  
  <p>Thanks</p>