Using Fixedheader, Fixedcolumn, ScrollX

Ludde

Dear All,

I need help from you! I need fixedheader, fixedcolumn and scrollx for my table. I have read that these does not work at the same time? However, I think they work good together apart from scrollX.

When I resize the window width (minimized), the table is not resize and the scollX is shown instead, but if I reload the page the table is resized and the scrollX is updated to correct value. I have tested to redraw the when I resized the window with no luck. Can I test something else?

I have done a jsfiddle that show the behaviour.
https://jsfiddle.net/fjr230np/

Cheers
Ludde

Ludde

I found this thread but I could not get any of the suggestions to work. Which one should I try to get to work?

http://mail.datatables.net/forums/discussion/47395/fixedheader-and-scrollx/p1

Ludde

I mange to get the scrollX working together with fixedheader by using "sidewalk" code from this link: http://mail.datatables.net/forums/discussion/47395/fixedheader-and-scrollx/p1

But with this code added the scrollbar at the top of the table dissapeared. How can I get it back?

Here is an example with the scrollX and fixedheader working, BUT with no top scrollbar:
https://jsfiddle.net/2f5hxLas/

This example top scroll is working, BUT not scrollx and fixedheader
https://jsfiddle.net/fjr230np/

Ludde

I notice that the header is revert back to show the first column first when you rezise the window

colin

I'm going to apologise, I only skimmed your posts as running short of time tonight but wanted to reply. I knocked out this example here, that has FixedHeader , FixedColumn extension and scrollX, and it seems to be behaving as expected.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

Ludde

Hello Colin, thank you very much for your reply!

Your example works great, but I found out way my code is not working. I'm using headerOffset.

if you switch:
fixedHeader: true

To:
fixedHeader: {
headerOffset: 200
}

ScrollX is not working, It is the correct way to do it?

I would like the header to follow my top border, so I'm using table.fixedHeader.headerOffset() when the window is resized.

Cheers Ludde

allan

Hi Ludde,

Thanks very much. I agree - it looks like there is a bug there when using FixedHeader with scrolling and an offset. We'll look into that and get back to you (probably on Friday).

Allan

Ludde

Thanks Allan! hope there are a solution.

sandy

Hi @Ludde ,

I've just been looking at this and it all seems to be working fine for me. Take a look at this example, which is a modified version of Allan's example using the changes you've suggested.

Everything seems to be working as expected for me there.

Could you please provide us with instructions on how to replicate the issue in that example, and also tell us exactly what the error is? If you can do that that would be great.

Thanks,
Sandy

Ludde

Hello Sandy,

I will try to explain

I see the issue with your updated example. If you rezise the window to something large (and update the window) and then start to minimize you see that the scrollers appear to early. You can check this by updating the window and see that the scrollers dissapears, which means that the scrollers did not work as expected when you start to minimize the window.

I hope you understand . Come back if not!

Cheers Ludde

sandy

Hi @Ludde ,

That's perfect thank you, I can see the issue now.

Thanks,
Sandy

Ludde

No problem Sandy! I'm glad that I could help with this exelent component!

Do you think there are a solution?

Ludde

Hello Allan, Sandy

Have you had time to look into the scrolling?

Cheers Ludde

colin

Sandy will be back in the office on Friday, so he won't be able to look at it before then I'm afraid,

Colin

Ludde

Thanks Colin. Have a nice week.

sandy

Hi @Ludde ,

Just to let you know that we have raised an issue for this. I've been looking at it a bit today, but we aren't sure yet what the best way to fix this is. We'll update here when we come up with a solution.

Thanks,
Sandy

Ludde

Thanks Sandy! Have a nice weekend.

Ludde

Hello Sandy and Colin,

Did you find a solution for this problem?

Thanks
Ludde

sandy

Hi @Ludde ,

The issue here is that the FixedHeader is given a set width - this ensures that the alignment with the main table is consistent. It is also this fixed width that causes the overflow to move to a scroll raver than resizing the whole container.

We haven't been able to think of a way around this yet I'm afraid. You can't just remove the fixed width as the alignment issues that would cause would be a worse bug than this.

We will update this thread when we have a solution, but we don't know when that will be. I'm afraid there are a lot of other issues that are taking a higher priority than this at the moment!

Thanks,
Sandy