FixedHeader bug when table is defined hidden

RBRamsey

https://jsfiddle.net/9vw8fezp/1/

When I declare a table with the hidden attribute, FixedHeader will not work.

<table id="example" class="table table-hover table-responsive-sm table-striped" hidden></table>

A work-around is: https://jsfiddle.net/9vw8fezp/2/

I hide the table while the data is loading, and show it afterward.

colin

I tried the top one and it's working fine for me - the header is fixed.

Please can you provide steps to demonstrate the problem.

Colin

kthorngren

I tried it with Chrome on. Mac and the first example is not working.

Kevin

RBRamsey

Using the first example: When I scroll past the bottom of the page, the headers move off of the page.

Using the second example: When I scroll past the bottom of the page, the headers stay on top of the page as expected.

I am using Chrome Version 85.0.4183.121 (Official Build) (64-bit) on Windows 10

colin

Ah seeing it on Chrome on W10. It's odd, a window resize sorts it out, so something odd going on. I've raised it internally (DD-1684 for my reference) and we'll report back here when there's an update.

Colin

allan

This is expected since the table is hidden while it is created. Therefore it doesn't have height or width and we need that information to be able to make the calculates for FixedHeader.

The solution is to call fixedHeader.adjust() once the table is made visible.

Updated example.

Allan