Off-canvas sidebar breaks responsiveness

omobo

I'm using Bootstrap and DataTables on the front-end of my admin dashboard project. Using the Responsive extension is not as easy at I thought, I have to do a lot of tweaking to get it right.

I have an off-canvas sidebar that completely breaks responsiveness of the table when it is activated. The table doesn't resize when the parent shrinks its width to fit said sidebar. Weirdly enough, pagination and search input do move with the parent element.

Here's the table's CSS

.full-width {
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap;
}
table.dataTable {
    border-collapse: collapse !important;
}
.control {
    padding: 0 20px !important;
}
div.dataTables_wrapper div.dataTables_length select {
    width: 45px;
}
table.dataTable>tbody>tr.child ul.dtr-details {
    width: 100%;
    padding: 0 10px;
}

@media screen and (max-width : 992px) {
    .dataTables_paginate {
        margin-top: 20px !important;
    }
}

And the JS

$("#table").DataTable({
    responsive: {
        details: {
            type: 'column'
        }
    },
    columnDefs: [{
        className: 'control',
        orderable: false,
        targets: 0
    }],
    order: [ 1, 'asc' ],
    lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]]
});

The sidebar code is pretty much this -> https://startbootstrap.com/template-overviews/simple-sidebar/ only on the right instead on the left.

It looks like this when the sidebar is active:

And like this when it isn't:

When I tried to resize it to see if it would work on mobiles, it got even weirder

Please help!

Thank you.

garciacrew

It's been several months, so perhaps you have already figured something out. Also, I am not a pro, but just an idea. Have you tried to increase the z-index of the screen sidebar?

allan

You need to call responsive.recalc() when the contents on the page are reflowed so DataTables can adjust its calculations. Alternatively, try calling columns.adjust().

Allan