Floating FixedHeader doesn't scroll horizontally

sanderv

Link to test case: https://jsfiddle.net/9hjbm7x0/

Description of problem:
First of al, I'm really impressed with what this library is able to do. However, there are some edge-cases. This is one of those edge cases.

Bootstrap 4 includes a 'table-responsive' class which sets the table to have a max-width of the parent width, and an overflow of auto. So, when a table becomes too wide for the content, the content stays the same size. This is especially useful for wide tables on narrow(er) screens.

The horizontal scrolling of the FixedHeader depends on the body to scroll, as the floating header is appended to the body. When the table is inside a container that defines its own overflow the header no longer scrolls horizontally.

When clicked on an header to sort (or I guess on an update of the fixedHeader) the position is recalculated and is then the correct position.

I can understand that it is quite hard to define where the floating header should be positioned, but what would probably fix this issue is to have the container definable. The fixed header is now always appended to the body, but my guess is that when the fixed header is appended to the container that specifies the overflow-x the horizontal scrolling will be correct again.

I'm not entirely sure if this introduces other errors though.

allan

Hi,

You are right - this is a case where FixedHeader just doesn't work at the moment I'm afraid. It doesn't handle being inside a scrolling container - hence the incorrect placement and not going with the x-scrolling.

For now it would require a workaround:

1. Use our own Responsive extension rather than Bootstrap's.
2. Use scrollX rather than Bootstrap's responsive (although note that this also isn't compatible with FixedHeader yet).

Neither is identical to what you are looking for - but it will take a fair amount of work to get that working, which is why it hasn't been done yet I'm afraid.

Allan

sanderv

Hi Allan,

Thanks for the response. If I understand correctly, and having updated the 'DOM' to be the same behavior as 'scrollX', as seen in https://jsfiddle.net/5y7x0our/ , the table itself is wrapped in a 'scroll-x' container.

As for option 1, I'd much rather have all the columns shown instead of hiding various columns under a click.

I thought that a quick-fix existed, but apparently there is no quick-fix that allows for fixed headers with horizontal scrolling. Are you looking to support scrollX with fixed headers?

allan

At some point yes, it is on our feature list. But we don't have a target date for implement it yet I'm afraid. We are working on a number of other features before that.

Allan

sanderv

Allright, thanks for the info!