Search code examples
twitter-bootstrapdatatables

Bootstrap's dropdown hidden by datatables

I'm using Twitter Bootstrap to create a button with a DropDown menu for each row in a DataTables grid, but the data container from DataTables is using "overflow: hidden" what is making the DropDown to be cut.

I cannot just switch to "overflow: auto" as this will cause to appear an unnecessary vertical scrollbar.

Here is a JSFiddle

HTML

<table cellpadding="0" cellspacing="0" border="0" class="pretty" id="example"></table>

JS

/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
    return {
        "iStart": oSettings._iDisplayStart,
            "iEnd": oSettings.fnDisplayEnd(),
            "iLength": oSettings._iDisplayLength,
            "iTotal": oSettings.fnRecordsTotal(),
            "iFilteredTotal": oSettings.fnRecordsDisplay(),
            "iPage": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
            "iTotalPages": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
    };
}

/* Bootstrap style pagination control */
$.extend($.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function (oSettings, nPaging, fnDraw) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function (e) {
                e.preventDefault();
                if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
                    fnDraw(oSettings);
                }
            };

            $(nPaging).addClass('pagination').append(
                '<ul>' +
                '<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' +
                '<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' +
                '</ul>');
            var els = $('a', nPaging);
            $(els[0]).bind('click.DT', {
                action: "previous"
            }, fnClickHandler);
            $(els[1]).bind('click.DT', {
                action: "next"
            }, fnClickHandler);
        },

            "fnUpdate": function (oSettings, fnDraw) {
            var iListLength = 5;
            var oPaging = oSettings.oInstance.fnPagingInfo();
            var an = oSettings.aanFeatures.p;
            var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);

            if (oPaging.iTotalPages < iListLength) {
                iStart = 1;
                iEnd = oPaging.iTotalPages;
            } else if (oPaging.iPage <= iHalf) {
                iStart = 1;
                iEnd = iListLength;
            } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
                iStart = oPaging.iTotalPages - iListLength + 1;
                iEnd = oPaging.iTotalPages;
            } else {
                iStart = oPaging.iPage - iHalf + 1;
                iEnd = iStart + iListLength - 1;
            }

            for (i = 0, iLen = an.length; i < iLen; i++) {
                // Remove the middle elements
                $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                // Add the new list items and their event handlers
                for (j = iStart; j <= iEnd; j++) {
                    sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
                    $('<li ' + sClass + '><a href="#">' + j + '</a></li>')
                        .insertBefore($('li:last', an[i])[0])
                        .bind('click', function (e) {
                        e.preventDefault();
                        oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
                        fnDraw(oSettings);
                    });
                }

                // Add / remove disabled classes from the static elements
                if (oPaging.iPage === 0) {
                    $('li:first', an[i]).addClass('disabled');
                } else {
                    $('li:first', an[i]).removeClass('disabled');
                }

                if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
                    $('li:last', an[i]).addClass('disabled');
                } else {
                    $('li:last', an[i]).removeClass('disabled');
                }
            }
        }
    }
});

/* Table initialisation */
$(document).ready(function () {
    $('#example').dataTable({
        "aaData": [
        /* Reduced data set */ ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 4.0", "Win 95+", 4, "X"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 5.0", "Win 95+", 5, "C"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 5.5", "Win 95+", 5.5, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 6.0", "Win 98+", 6, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 7.0", "Win XP SP2+", 7, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A"],
            ['<div class="btn-group" style="float: left">' +
                                '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' +
                                    '<span class="caret"></span>' +
                                '</a>' +
                                '<ul class="dropdown-menu">' +
                                    '<li><a href="#">Approve</a></li>' +
                                    '<li><a href="#">View</a></li>' +
                                '</ul>' +
                            '</div>' +
                            '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' +
                            '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A"]
        ],
            "aoColumns": [{
            "sTitle": "Engine"
        }, {
            "sTitle": "Browser"
        }, {
            "sTitle": "Platform"
        }, {
            "sTitle": "Version",
            "sClass": "center"
        }, {
            "sTitle": "Grade",
            "sClass": "center"
        }],

            'sScrollX': "100%",
            'sScrollXInner': "150%",
            'bScrollCollapse': true,
            'bAutoWidth': false,
            'bDeferRender': true,
            'bLengthChange': false, "sPaginationType": "bootstrap",
            "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });
    $('.acoes').dropdown();
});
Solution

  • Ok, after the comments we had, I realized what you want:

    You have a <div> element with overflow:auto, and you want that an element inside of that <div> (the <ul> where the menu is), to "escape" from the overflow rule and appear floating, overriding the overflow rule from its ancestor.

    But I'm afraid that is not possible. The closest thing you could do is:

    • Use javascript to create the <ul> with the menu outside the <div> with overflow:auto, and then use position absolute to set it where it should go, or
    • Use javascript to auto scroll at the bottom once that dropdown menu is activated, by adding something like an event listener to the the last dropdown.

    The second option seems more elegant and less 'hackish'. (Personally I would just ignore that problem, but if I have to choose, I would go for the second option)