Theme CSS interfering with DataTables FixedHeader only

Theme CSS interfering with DataTables FixedHeader only

KeiSenpaiKeiSenpai Posts: 21Questions: 8Answers: 0

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?

Answers

  • KeiSenpaiKeiSenpai Posts: 21Questions: 8Answers: 0

    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.

  • KeiSenpaiKeiSenpai Posts: 21Questions: 8Answers: 0

    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);
            } );
    
This discussion has been closed.