FixedHeader with Flexbox

ds00424

Hi Again.
Another question about FixedHeader.

I am trying to get FixedHeader to work in FlexBox. Using Flexbox, I have a page header at the top of the window and page footer at the bottom of the window. Both stay in place due to Flexbox. My Datatable is in the "Middle" div which, as per Flex, fills the remaining space betweeen the page header and page footer. I have plans to also have a left sidebar, but was able to reduce the test case.

Test case: https://live.datatables.net/dupejubi/1/

The datatable displays properly with minimal config. When I scroll the table the Fixedheader does not show. Interestingly, if I scroll down a little bit and then change the browser width, the Fixedheader shows. And the Fixedheader remains showing even when I scroll back to the top of the table. Only when I again change the browser width does the Fixedheader dissapear.

I read in one forum post to try scrollY instead of FH, but that didn't seem to get me anywhere (I would prefer FH and not scrollY).

If I enable scrollX, The table is centered in the Middle div and the initial header is left justified. When I scroll a little and then change the browser width, the FixedHeader shows and shows in the proper place. Again to make the FH go away at the top I must change the browser width.

I have tried having autoWidth set to T and F.

Your guidance would be appreciated.
Thanks for any help/advice.
-- David

allan

Hi David,

FixedHeader only puts a scroll listener on the window. So what is needed is to let FH know when the scroll event happens on your scrolling container (#Middle in this case).

In the scroll event listener call fixedHeader.adjust().

Here is an updated example.

Regards,
Allan