DataTables height causes its content to collapse with a page footer...

phi1ipp

Hi guys,

Maybe somebody have a solution to the problem. I build the datatable after content is put on the page. So, I think, when table controls are added above and below, its height increases and the bottom controls collapse with the page footer. I'm using bootstrap 4.

Thank you in advance!

phi1ipp

False alarm... I think the issue is on my side again. I was prepping a fiddle and found that it works, when I load all the libraries from CDN. In my project I pull them bundled. As I had few issues trying to make it work together with webpack, I guess it's something in this area.

const JSZip = require( 'jszip' );
window.JSZip = JSZip;

require( 'datatables.net-bs4' );
require( 'datatables.net-buttons-bs4' );
require( 'datatables.net-buttons/js/buttons.flash.js' );
require( 'datatables.net-buttons/js/buttons.html5.js' );
require('datatables.net-bs4/css/dataTables.bootstrap4.min.css');
require('datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css');

$(document).ready(() => {
    // add export button for Members page
    // in the same row with other controls
    if (/Members/.test(window.location)) {
        $("#datatable").DataTable({
            buttons: [{ extend: 'excel', text: 'Download as XLS' }],
            dom:
                "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'i><'col-sm-7'p>>"
        });
    } else {
        $("#datatable").DataTable();
    }
});

phi1ipp

That's what I see
and I believe it's b/c of footer class which has

.footer {
    position: absolute;
    bottom: 0;
    height: 60px; 
}

I see this happening when there is a text wrap in cells. So if I make my window fully wide open, then there is no collapse.

phi1ipp

turned out it's Bootstrap default behavior, sorry for the false alarm!

the solution is to apply, maybe it will help somebody in the future

body {
    bottom-padding: 60px;
}