Fix for FixedColumns + FixedHeader without scrolling
Fix for FixedColumns + FixedHeader without scrolling
Nick Hope
Posts: 48Questions: 12Answers: 1
in FixedColumns
FixedColumns has been compatible with FixedHeader since the release of FixedColumns 4. There is an example of the 2 working together, with both header and footer, at https://datatables.net/extensions/fixedcolumns/examples/integration/fixedHeaderFooter.html
However, if you don't also use scrolling (scrollX / scrollY), the cells in the table header and footer are not fixed horizontally.
After many hours I finally figured out how to solve it with this css:
th.dtfc-fixed-left {
background-color: white;
top: 0; /* for the header */
bottom: 0; /* for the footer */
z-index: 3 !important;
}
Tested in Chrome and Firefox with FixedColumns 4.1.0 and either FixedHeader 3.1.9 or 3.2.3.
Here's a demo: http://live.datatables.net/nujapafu/1/edit
Perhaps this is something that could be incorporated in the Datatables code?
Replies
Hi Nick,
Many thanks for flagging that up! I've committed a change for this here.
Allan
Thank you @allan.
Actually your fix seems to just be for the transparent cell in the footer at the bottom of the fixed column(s), which I think I commented about on https://datatables.net/extensions/fixedcolumns/examples/integration/fixedHeaderFooter.html.
The code in this post is for a slightly different issue, whereby someone wants to fix header/footer and columns but NOT use scrollX/scrollY/scrollCollapse. Your fix obviates the need for the first line, so it's now just 3 lines of css (or 2 without a footer):
Hahah! I'm genuinely surprised that FixedColumns works without
.
scrollX. It wasn't intended to, but Sandy sneaked that one past me (assuming it was intentional - I don't think we've ever tested for that specific case)I don't think we'll officially consider this mode supported, but I see no harm in adding the proposed CSS, so have committed that in.
Thanks again,
Allan
I think it was just me pigheadedly trying everything under the sun (and spending far too much time on StackOverflow) until something worked, because I wanted this behaviour full-screen without scrollbars.
Thanks for incorporating it in the code. Hopefully there are no gotchas.
Actually, @allan, if someone only wants a fixed column and no fixed header/footer, that new css vertically stickies the header/footer cells that are in the fixed column, which is not what you'd want. So I guess it's best not to add that css after all, unless you also put in some code to check if fixed header/footer is also enabled.
I still think it's worth mentioning in a comment on that example page for someone who wants a full window table with fixed columns and header (without scrollX/scrollY). Or maybe make another example page for it?
Could you show me an example of what you mean please? I've just tried FixedColumns + FixedHeader on the page, with online FixedColumns active, and it looks okay (minus the error in the footer due to no background colour).
Allan
http://live.datatables.net/zisozipi/2/edit
@allan I'm still talking about full screen, so without the scrollX and scrollY (which I've commented out). And I used the css from my comment above.
But looking at your commit, I see you did it in a slightly different way and it looks like you only changed the css for tfoot and not thead.
So I may well be confused and there may well be no problem.
Right enough - I see the issue in the updated code. Given that the elements are position sticky, I'm not actually sure how that could be resolved. If there was a sticky-x option, similar to overflow-x, then that would do the job, but as far as I am aware, I don't think there is such an option.
I fear the boundary might have been pushed just a touch too far this time
Allan