Navigation bar, fixed headers and dom elements

Navigation bar, fixed headers and dom elements

XoxxoxuatlXoxxoxuatl Posts: 14Questions: 2Answers: 0
edited January 26 in Free community support

Link to test case: https://live.datatables.net/minijusa/5/edit?html,css,js,output
Debugger code (debug.datatables.net): -
Error messages shown: -
Description of problem: Hi Folks, when the table is scrolled downwrds the fixed header bumps up for some pixels and vice versa.

Thanks Thomas

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin

    That's a very old version of DataTables you've got there. It works better with the currently nightly: https://live.datatables.net/minijusa/6/edit . There is a small shift in the header which is probably something to do with a border that I'll need to have a look at.

    Allan

  • XoxxoxuatlXoxxoxuatl Posts: 14Questions: 2Answers: 0

    Indeed the sources were some kind of outdated.

    After adding the dom property to the newer version the same header shift is shown (https://live.datatables.net/minijusa/15/edit), as you already mentioned.

    There is a small shift in the header which is probably something to do with a border that I'll need to have a look at.

    This would be great to have this resolved, Thanks Allan!

    BR, Thomas

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin

    Hi Thomas,

    Agreed - there is something very wrong there. I'll hold the releases until I can dig into this more.

    Allan

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin

    Hi,

    Could you try that example now please? You might need to do a crtl-f5 refresh to make sure you get the latest changes. It seems to be behaving after some changes I made last week.

    Allan

  • XoxxoxuatlXoxxoxuatl Posts: 14Questions: 2Answers: 0

    Hello,

    thanks for the update.

    After adding the dom property to the table initialization the same behavior (bumping header) is shown.

    https://live.datatables.net/minijusa/30/edit

    BR, Thomas

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin

    Yup, I see it. I'll see if I can do something about it. Thanks.

    Allan

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin

    This commit fixes that error and you can see it in effect here. You need to hide the HTML / CSS etc to make it full width. It does slightly odd things with the column alignment if it expands past the container.

    Allan

  • XoxxoxuatlXoxxoxuatl Posts: 14Questions: 2Answers: 0

    Great, following your solution i was able to adapt it to fixedHeader version 3.4.0
    and the issue of the bumping header is resolved!

    Unfortunately, there is a minor withdraw with this which puzzles me…
    ..the table is now visible beside the dom-wrapper on the right site, any ideas?

    Thank You!

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin

    Perhaps a z-index issue? If you can show me an example of it happening I can take a look.

    Allan

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin

    Actually, I recall something about that while I was testing, try setting width: 100% on the dom-wrapper.

    Allan

  • XoxxoxuatlXoxxoxuatl Posts: 14Questions: 2Answers: 0
    edited February 8

    It can be seen on the last edit. Tried already increasing the z-index without success, width is set to 100%.

    you can see it in effect here.

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin

    With left and right it appears to be okay: https://live.datatables.net/minijusa/50/edit .

    Allan

  • XoxxoxuatlXoxxoxuatl Posts: 14Questions: 2Answers: 0

    I am not sure about this left and right thing...the issue is present in your last edit, too.

    Which setting exactly do you mean?

    BTW: A workaround for this issue is to set the dom-wrapper width >100%.
    https://live.datatables.net/minijusa/52/edit

    But honestly i do not like it very much.

    Thanks Thomas

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin
    Answer ✓

    My last edit didn't appear to save, sorry. Try this one: https://live.datatables.net/minijusa/54/edit . Still not perfect, but hopefully enough to apply to your own page.

    Allan

  • XoxxoxuatlXoxxoxuatl Posts: 14Questions: 2Answers: 0

    Like a charm :) ...
    ...wishing a great weekend ahead!

  • XoxxoxuatlXoxxoxuatl Posts: 14Questions: 2Answers: 0

    Hello,

    maybe i can bring this topic up, once more.

    After implementing the new layout attribute the upper items pagelength and search are no longer fixed. https://live.datatables.net/minijusa/56/edit

    Is there a way to have the new layout functionality with fixed items?

    Thanks Thomas

  • allanallan Posts: 61,044Questions: 1Answers: 9,955 Site admin
    Answer ✓

    With the previous example a class name was added to a wrapper element and then CSS used to target that:

        div.dom_wrapper {
          position: fixed;
          top: 42px;
          //...
        }
    

    With layout it isn't currently possible to add an id or class to a row or cell in the layout. Maybe that is something that would be useful - I'll think about how it might be done.

    However, that doesn't mean you are SOL. It just means a different selector is needed:

    div.dt-container div.dt-layout-row:first-child {
          position: fixed;
          top: 42px;
          // ...
    }
    

    for example.

    Allan

  • XoxxoxuatlXoxxoxuatl Posts: 14Questions: 2Answers: 0

    Thanks Allan for the first-child hint, the "layout" attribute is now here to stay :).
    Solution: https://live.datatables.net/minijusa/62/edit

    .justify-content-between:first-child {
          position: fixed;
          top: 42px;
    //...
    
Sign In or Register to comment.