Datatable Not Being Responsive While In a Floating Bootstrap Panel

Webbly

I have created a bootstrap panel which I hover above everything else on my page. I use ajax to fill it with data from my database.

However when I go to make it responsive that it scales nicely on mobile it doesn't work. I have used it elsewhere on my site and it works sometimes.

Here is a link to a fiddle.

Here is my datatable code:

$("#percentBreakdownTable").DataTable({
    dom: 'Bfrtip',
    buttons: [
    { 
        extend: 'csv',
        text: '<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>'
    },
    { 
        extend: 'print',
        text: '<span class="glyphicon glyphicon-print" aria-hidden="true"></span>'
    }],
    paging: false,
    info: false,
    fixedHeader: true,
    scrollY: $(".floatHolderBody").height() * 0.6,
    scrollCollapse: true,
    responsive: true
});

allan

I think its the dom parameter that is being used that is the issue. Commenting it out allows it to work as expected: https://jsfiddle.net/7h5p6scb/2/ .

The Bootstrap dom parameter is a bit more complex that the standard DataTables ones. You can use the value in the documentation for Bootstrap as the basis, but most examples for Bootstrap use an API method which I find a little easier.

Improvements in this area are planned!

Allan