Fixed Header Scrolling problem

reda_sondos

Dear,

I have create a table using datatable plugin, and use the Fixed Header Extra.
and put this table at div with [overflow : auto], when column exceeded the div width, it create a horizontal scroll,
when i uses this scroll to scroll table columns, columns does not move according to the scroll.

see this snapshot...
http://imageshack.us/photo/my-images/716/datatablescrollingprobl.jpg/

I need your help...

Thanks.

allan

It wouldn't since the FixedHeader is positioned relative to the document as a whole, rather than to the scrolling container you put in - i.e. FixedHeader doesn't know anything about your scrolling container. You could put in an event that will modify the fixed header position when you do scroll, or you could just use the x-scrolling that is build into DataTables: sScrollX .

Allan

reda_sondos

Dear Allan,

When i use the sScrollX in my Data Table plugin as the following:
-------------------
"sScrollX": "100%",
"bScrollCollapse": true
-------------------


it alerts me the following message.
-------------------------------------------------------------
FixedHeader 2 is not supported with DataTables' scrolling mode at this time.
-------------------------------------------------------------

please, Advise me...

Thanks,

Xinez

no answer eh?
is there no solution for this problem?
i got the same problem here :(

stephrsharp

I'm getting the same error:
"FixedHeader 2 is not supported with DataTables' scrolling mode at this time"

Is there any solution/workaround for this issue?

stephrsharp

Found a work around for this issue:

[code]
var oTable = jQuery('#table_id').dataTable({
"bPaginate": false,
"bFilter": false,
"sScrollY": "600",
"sScrollX": "100%",
"sScrollXInner": "400%",
"bScrollCollapse": true
});
new FixedHeader( oTable );
[/code]

The key is to increase sScrollXInner to accommodate the width of the table. You may also need to put it in a div with overflow:auto.

davisbriant

I am having this same error code pop up when trying to use Scroll with FixedHeader. The pop up message fires upon page load, however it seems that the scrolling is working perfectly with the fixed header/footer. Is there a way to just disable the pop-up?

UPDATE: I found the alert box code in FixedHeader.js and just commented it out. Will have to check cross-browser compatibility but it looks like everything is working in Chrome.

allan

FixedHeader is not supported with scrolling - there is currently no solution, it simply isn't implemented. Scrolling (y scrolling specifically) and FixedHeader are trying to solve the same issue - keep the header visible. Obviously if you have only x-scrolling enabled then I can see that there is a piece missing and FixedHeader probably should support that, but I'm afraid that at this moment it doesn't and it isn't likely to fully for quite some time as there is already a large queue of features to be implemented in DataTables :-)

Allan

UnexpectedIndent

Hi Allan,

I realise this isn't something you're planning on adding right now, but do you have any thoughts on how scrolling containers might be implemented (within FixedHeader or in general)?

I'm currently using the workaround described above with a plain html table, i.e. listen to my container's scroll events and update the header accordingly. The only issue with this is that if the container scrolls in both directions, the header will mask the top of the vertical scrollbar. Changing the Z-index doesn't help, as I can only bring it in front of or behind the container as a whole, since the cloned table is a child of the document itself.

I've briefly experimented with adding the cloned table to elsewhere in the DOM, but haven't managed to get anything working yet. I was just wondering if there are any obvious problems with this approach, compared to positioning relative to the document as a whole?

allan

You'd probably need to pass in the container element to FixedHeader to allow it to use that as a base for its calculations and then update all of its calculations to take that into account.

Or could you just use the scrolling feature built into DataTables?

Allan

UnexpectedIndent

Yeah, I think that's probably the best option actually, if I can get it to work with the table in question. I was just hoping to use plain html to avoid messing with the appearance too much and having to restyle everything :(

Thanks,
Mat