Search code examples
jqueryhtmlcsstwitter-bootstrapdatatable

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 (https://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

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">>'
});