Theme CSS interfering with DataTables FixedHeader only

KeiSenpai

Greetings all,

The theme I am using for my site, has a section of CSS that is interfering with the FixedHeader of DataTables.

.wrapper {
    position: relative;
    top: 0;
    height: 100vh; <--- Removing this, allows fixed header to work
}

I can remove the height and fixed headers work. However, when scrolling, the sidebar now has white space below. I am assuming this allowed the sidebar to stay with the page as it scrolled. Any idea of what I can apply to the style to override for the table or do I need to remove this to get it to work?

KeiSenpai

Additional information:

Removing that line above does make the fixed header work. I adjusted the CSS for the side panel to fix that, it just does not follow the user down for now and I am okay with that. However, I am using three tabs to seperate out three different tables. The fixed header is somewhat working. The first table header is fixed, and shows when scrolling for other tables.

KeiSenpai

Was able to solve it using this:

        $( "#a-tab" ).on( "click", function () {
           setTimeout(function () {
                  tablea.fixedHeader.enable().fixedHeader.adjust();
                  tablebl.fixedHeader.disable();
                  tablec.fixedHeader.disable();
           }, 200);
        } );