Navigation bar, fixed headers and dom elements

Xoxxoxuatl

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

allan

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

Xoxxoxuatl

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

allan

Hi Thomas,

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

Allan

allan

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

Xoxxoxuatl

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

allan

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

Allan

allan

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

Xoxxoxuatl

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!

allan

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

Allan

allan

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

Allan

Xoxxoxuatl

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.

allan

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

Allan

Xoxxoxuatl

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

allan

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

Xoxxoxuatl

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

Xoxxoxuatl

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

allan

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

Xoxxoxuatl

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;
//...