François Dupont François Dupont - 7 months ago 155
HTML Question

Dropdown in dataTables

First of all, I tried to resolved my problem with

Bootstrap button drop-down inside responsive table not visible because of scroll

and

Bootstrap dropdown menu within a responsive table

but no way has functioned.

Issue : When I click on gear button I want that the dropdown appears above the dataTables and not IN the table.

Note that my table is a dataTables (https://datatables.net) initialized like that

$('#table_fours_send').DataTable({
responsive: true,
scrollX: true,
sScrollX: '100%',
paging: false,
dom: 't<"margin-dataTable-bottom"<"pull-left margin-dataTable-pagination">>'
});


problem

Html code for my dropdown button

<div class="form-group col-sm-2 no-padding-left no-padding-right">
<div class="dropdown inline-block">
<i class="fa fa-cog fa-lg padding-gear pointer dropdown-toggle" id="dropdownSend"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></i>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownSend">
<li><a href="#" data-toggle="modal" data-target="#m_add_contact">{{'label.add_contact'|trans()}}</a></li>
<li><a href="#" data-toggle="modal" data-target="#m_add_update_contact">{{'label.update_contact'|trans()}}</a></li>
</ul>
</div>
</div>


The better result is from the first link (http://stackoverflow.com/a/34211851/5027172)
enter image description here

But I don't want to push with padding but rather showing the dropdown above the table.

Any ideas ? Needs more informations ?

Thanks

Answer

After some hours I finally found the solution

The scrolling X of the plugin dataTables is responsible for this act !

t_fournisseurs_send = $('#table_fours_send').DataTable({
    responsive: true,
    scrollX: true,
    sScrollX: '100%',
    paging: false,
    dom: 't<"margin-dataTable-bottom"<"pull-left margin-dataTable-pagination">>'
});

to

t_fournisseurs_send = $('#table_fours_send').DataTable({
    responsive: true,
    paging: false,
    dom: 't<"margin-dataTable-bottom"<"pull-left margin-dataTable-pagination">>'
});

I hope that this can help some users of dataTables with dropdown.

Have a nice day.