Header moves to the top of page

geebeetoo

When I scroll table (with fixedHeader: true) I get a second header popping up at the top of the page when it is not necessary.

See image:

How do I prevent this?

kthorngren

Likely a CSS issue. Looks like you are using Bootstrap. The first thing to do is make sure you have all the correct Datatables Bootstrap integration files. The easiest way is to use the Download Builder. If this doesn't help please post a link to your page or test case so we can see what the problem is.

Kevin

geebeetoo

Used Download Builder. Still did not correct it.

I'm working inside a web app and users need login ID to access any of the pages. It's impossible to link a page here. But we can do a screen share session in which you can view it in action.
I've done it before with Allan. Not sure if you can.

Let me know.

allan

There is a scrollbar below the table in the screenshot - that is making me think you might have scrollX enabled for the table? If so, that doesn't work with FixedHeader I'm afraid.

Or are you using Bootstrap's responsive table option (which just wraps a scrollable div around the table) - that might also be causing the problem.

I can do a screenshare if it would help (Kevin is a helpful member of the community, doing live debugging falls to me really ). That said, i might be able to try reproducing the issue if you are able to give me a bit more information about it, or say right out if it is a supported use case or not.

Thanks,
Allan

geebeetoo

Thank you. I do have the ScrollX on true but that doesn't fix it.

I decided to remove FixHeader (sadly) and now it eliminates that problem.

Thanks for your help.