Dropdown in dataTables
<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>