Button collection dropup not working correctly with Buttons below table

jimcan-redmond

Link to test case:
https://jsfiddle.net/jimcan/5tpnedqm/

Description of problem:
The test case uses two button bars, one above the table and one below. The button bar has two buttons, one with a short button collection, and a second longer button collection.

The button bar at the top works correctly. The height of the longer list is too tall to fit above the table and properly drops down instead.

The button bar below the table is where the popup positioning stops functioning properly. The positioning code in _popover is using the button offset instead of position when determining whether to move the popup up or down. I have made a fix locally to datatables.buttons.js (2.0.1) that works for my scenario (lines 1236-1245):

        // calculate overflow when positioned above
        var buttonTop = $(hostButton.node()).offset().top;
        var listTop = buttonTop - collectionHeight;
        var tableTop = tableContainer.offset().top;
        var topOverflow = tableTop - listTop;

        // if bottom overflow is larger, move to the top because it fits better, or if dropup is requested
        var moveTop = buttonPosition.top - collectionHeight - 5;
        if ( (bottomOverflow > topOverflow || options.dropup) && (buttonTop+moveTop) > 0 ) {
            display.css( 'top', moveTop);
        }

allan

Hi,

Many thanks for reporting this - agreed, there is most certainly a bug there. I'll get it sorted for the next release.

Allan