Datatable Not Being Responsive While In a Floating Bootstrap Panel

Datatable Not Being Responsive While In a Floating Bootstrap Panel

WebblyWebbly Posts: 3Questions: 2Answers: 0

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
});

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

This discussion has been closed.