Misaligned columns in fixed header table inside modal popup

NoBullMan

Link to test case: Intranet app
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I display a data table inside a modal popup. I wanted to add fixed header so that header wouldn't scroll out of view. I added, among other things:

scrollCollapse: true,
autoWidth: true,
select: true,
fixedHeader: {
    header: true,
    footer: true
 },
 scrollY: '80vh',

When modal pop up appears, column are all squished to the left and I have to select number of records per page or sort by a column to have it display properly.

I tried this when populating data table, didn't work; added it to modal popup's 'show' method; no luck:

tblMissingDetail.order([0, "asc"]).draw();
tblMissingDetail.rows().invalidate();
tblMissingDetail.columns.adjust();


$('#detailNotFoundModal').on('show.bs.modal', function (event) {debugger
    tblMissingDetail.order([0, "asc"]).draw();
    tblMissingDetail.rows().invalidate();
    tblMissingDetail.columns.adjust();
});

This is the event that shows the modal popup:

$(document).on("click", "#lblNotFoundCount", function (event) {
    var value = $(this).attr("data-count");

    if (value != null && value != undefined && value != '') {
        tblMissingDetail.search("").draw();
        tblMissingDetail.order.neutral().draw();
        $('#detailNotFoundModal').modal({ backdrop: 'static', keyboard: false });
        $('#detailNotFoundModal').modal('show');
    //    //tblMissingDetail.columns.adjust().fixedColumns().relayout();
    //    //$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
    //    tblMissingDetail.rows().invalidate();
    //    tblMissingDetail.order([0]).draw()
    }
    else
        return false;
});

Googled the issue and tried all suggestions, all to no avail. Hopelessly stuck!

kthorngren

See if calling the fixedHeader.adjust() API when the modal is displayed helps.

Kevin

NoBullMan

Thank you Kevin.
I tried this right after table was populated with data rows; right after modal was shown and also in modal's "show.bs.modal" but none of them worked.
In non-modal situations I had the same issue when data table was in a hidden div and I had to make the div visible first and then apply columns.adjust() and that worked. But modal pop up seems to be a different animal!

kthorngren

columns.adjust() and fixedHeader.adjust() are two different APIs. Did you try fixedHeader.adjust()? You might need both. These are to be called when not visible Datatable is made visible so Datatables can calculate the width based on the visible element it is in.

If you still need help please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

NoBullMan

Hi Kevin
yes, I used both; in fact I added it to the list of other APIs I had listed in my initial post.
I will work on it a bit more and problem persists I will try to create a test case to show the issue. I appreciate the time you take to help us newbies!

kthorngren

Also make sure you are using the proper Bootstrap styling integration files for FixedHeader. Use the Download Builder.

Kevin

NoBullMan

I was digging some more and came across https://datatables.net/forums/discussion/41126/how-can-fixedheader-work-for-bootstrap-modal this post by Colin.
He says: "Sorry, no. Bootstrap uses its own scrolling container for the modal, and that isn't something that FixedHeader currently supports. Just the main window,

Cheers,
Colin"
Out of luck I guess!

colin

@NoBullMan - Ha, no, that thread is four years old - it was the case at the time! We totally re-wrote FixedHeader (and FixedColumn) in the past year or so, to use the sticky attribute which has made the extension far more flexible,

Colin