CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapdatatable
François Dupont
François Dupont

Reputation: 426

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

Upvotes: 1

Views: 12536

Answers (2)

Mazz Khan
Mazz Khan

Reputation: 21

After reviewing @quakes answer, there are some minor changes to respective code that will remove the unwanted created html at bottom of the page along with padding.

// Find the actual .dropdown-menu
        var $dropdown = $container.find('.dropdown-menu');
        if ($dropdown.length) {
            // Save a reference to it, so we can find it after we've attached it to the body
            $container.data('dropdown-menu', $dropdown);
        } else {
            $dropdown = $container.data('dropdown-menu');
        }

        $dropdown.css('top', ($container.offset().top + $container.outerHeight()) + 'px');
        $dropdown.css('left', $container.offset().left + 'px');
        $dropdown.css('position', 'absolute');
        $dropdown.css('display', 'block');
        $dropdown.appendTo('body');
    });

    $(document).on('hide.bs.dropdown', '.table-responsive', function (e) {
        // Hide the dropdown menu bound to this button
        $(e.target).data('dropdown-menu').remove();
    });

Upvotes: 2

Fran&#231;ois Dupont
Fran&#231;ois Dupont

Reputation: 426

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.

Upvotes: 7

Related Questions