Is anything wrong with fixedHeader/headerOffset?

Is anything wrong with fixedHeader/headerOffset?

voronvvoronv Posts: 3Questions: 1Answers: 0

My understanding of this feature was that if the headerOffset is set, then this would "draw" the ceiling for the fixed header grid while scrolling.
In other words, there might be a preserved area above the grid (with the banner or menu or whatever) and when grid is scrolled down to the end - the header would stick to the invisible lower edge of the preserved area instead of the top of the entire page.

What is happening now is that the header is absolutely positioned "offset" pixels down the top of a page (which is good), but the grid rows including the header one are moving up and appear above the header, totally overlapping the preserved area.
At the end the header resides somewhere in over the data rows and looks not very pleasant. Oh, and I forgot to mention: at some point there are 2 headers displayed for the grid!

If this is intended behavior, I don't see any sense in it.

This is why I rather think it must be a bug.

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    You mentioned scrolling. Are you using scrollY or scrollX?

    If so, FixedHeader is not compatible with the Datatables scrolling features:
    https://datatables.net/extensions/fixedheader/

    Do the FixedHeader offset examples work for you?
    https://datatables.net/extensions/fixedheader/examples/

    We'll need more info from you regarding your setup. Can you provide a link to your page or a test case showing the issue?

    Kevin

  • voronvvoronv Posts: 3Questions: 1Answers: 0

    In the order of the questions asked:
    1. No, I am not utilizing scrollX or scrollY options in my example.
    My table is a direct copy of the table that you use in your fixed header examples.

    2.Yes, I have just tried both offset examples, directly on your site.
    I would say one of the samples might be doing what I expected in a first place: while scrolling, the header sticks to the lower edge of a banner instead of going all way up to the top of a screen. But a second example.... is very questionable.

    It is claimed there that the header offset can be set 2 ways: by setting the fh-fixedHeader class (pressumingly on the area above the fixed header grid), or using the header offset option.

    I have checked the source code of a page and I see that the fh-fixedHeader is really set on the banner elements on a top of a page. So, this feature works well.

    Then, the id="fixed" belongs to the DIV element located right before the fixed header grid. If I understand it correctly, it should make the header (and the rest of a grid) to never cross this boundary - the lower Y coordinate of the DIV id="fixed".
    But it does crossing this boundary and same as with the fh-fixedHeader class approach - sticks to the page banner on a top. (And it sticks there only because you did not remove this class from the banner elements while you demonstrate the "manual" approach, making the test of the "manual" case invalid).

    Shortly saying, I have a reason to believe that "manual" option for setting the header offset does not work.

    Regards.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Thanks for the additional detail. I'll let the developer comment on the "manual" option and how it works.

    Kevin

  • voronvvoronv Posts: 3Questions: 1Answers: 0

    Sorry, there is no bug in there.

    It is just some important note needs to be added to the FixedHeader usage instructions. Where the following page: https://datatables.net/extensions/fixedheader/examples/options/offset.html says:
    "This can be done in one of two ways:
    - Automatically, by assigning the class fh-fixedHeader to the fixed elements
    - Using the fixedHeader.headerOffset and fixedHeader.footerOffset options",
    it needs to be stressed that in both cases the "fixed elements" should have mandatory style="position:fixed" set on them.
    Otherwise users will see the effect that I have experienced.

    Thank you.

This discussion has been closed.