Head/Body misalignment when both horizontal/vertical scrolling is enabled

mmarchetta

Hi guys,
When both sScrollY and sScrollX are used, if you scroll horizontally up to the limit then the head and the body of the table get misaligned because when the vertical scrollbar appears next to the body it's included in the body's width.

You can see this in the example in the site:
http://datatables.net/release-datatables/examples/basic_init/scroll_xy.html

When you scroll up to the limit at the right you'll see that at some point the header stays fixed and the body keeps scrolling.

The problem is that if you CSS the table and user lines for separating columns this is too visible.

I think that 2 potential solutions would be either (a) make the viewport of the body wider so the scrollbar is out of it; or (b) make the header wider so the header's width = body's width + scrollbar's width. But not sure (didn't look into the code).

Thanks!
Martin

kdorff

Yeah, I experienced this problem in my own table and while the issue is visually less apparent in the demo table Marin mentioned, when the columns are narrower (and left justified instead of centered) the problem becomes very obvious, the data is clearly misaligned with the headers.

bluebaron

Same issue here.

bluebaron

Seems like a long standing issue with all the posts ending up in the ignore pile.

bluebaron

table.fnAdjustColumnSizing(); might fix your issues, but if you scroll all the way right ... it offsets by approximately the width of the vertical scroll bar.

allan

If you can please post a link to your test pages showing the issue, then I'll be able to take a look at what is causing the problem. Certainly this is a particularly difficult part of the code to get right, so there is a decent possibility of issues, such as you are seeing, but to have any chance of being able to address then, I'll need to be able to see and recreate the problems.

Thanks,
Allan

bluebaron

http://datatables.net/release-datatables/examples/basic_init/scroll_xy.html
It does it on your own example. I don't think there's anything you can do about it. It doesn't appear as bad on your example because you don't have separators on your column headers but it does it just as much as ours does.
As soon as you scroll back the distance of the skew, it repairs itself.

allan

That specific issue is fixed in the 1.9.1 nightly (available on the downloads page, 1.9.1 will be released at the end of the month). Here is an example which shows the fix in place: http://live.datatables.net/ikipum/edit (click the 'Render' button at the top left to see the page in action).

Allan

bluebaron

Ah, snap! You were all over that shit. Settled.

armani

Allan, I tried introducing vertical scroll in my table and the column header wont resize if I resize the window.Can you try this example and resize the browser, tried in Chrome & Firefox.
What could be wrong ?
Thanks in advance !
[code]



DataTables live example

@import "http://live.datatables.net/media/css/demo_table.css";




window.onload = (function() {
$('#example').dataTable( {
"sScrollY": 200
} );
} );




Live example




Rendering engine123
Browser
Platform(s)
Engine version
CSS grade




Trident
Internet Explorer 4.0
Win 95+
4
X


Trident
Internet Explorer 5.0
Win 95+
5
C


Trident
Internet Explorer 5.5
Win 95+
5.5
A


Trident
Internet Explorer 6
Win 98+
6
A


Trident
Internet Explorer 7
Win XP SP2+
7
A


Trident
AOL browser (AOL desktop)
Win XP
6
A


Gecko
Firefox 1.0
Win 98+ / OSX.2+
1.7
A


Gecko
Firefox 1.5
Win 98+ / OSX.2+
1.8
A


Gecko
Firefox 2.0
Win 98+ / OSX.2+
1.8
A


Gecko
Firefox 3.0
Win 2k+ / OSX.3+
1.9
A


Gecko
Camino 1.0
OSX.2+
1.8
A


Gecko
Camino 1.5
OSX.3+
1.8
A


Gecko
Netscape 7.2
Win 95+ / Mac OS 8.6-9.2
1.7
A


Gecko
Netscape Browser 8
Win 98SE+
1.7
A


Gecko
Netscape Navigator 9
Win 98+ / OSX.2+
1.8
A


Gecko
Mozilla 1.0
Win 95+ / OSX.1+
1
A


Gecko
Mozilla 1.1
Win 95+ / OSX.1+
1.1
A


Gecko
Mozilla 1.2
Win 95+ / OSX.1+
1.2
A


Gecko
Mozilla 1.3
Win 95+ / OSX.1+
1.3
A


Gecko
Mozilla 1.4
Win 95+ / OSX.1+
1.4
A


Gecko
Mozilla 1.5
Win 95+ / OSX.1+
1.5
A


Gecko
Mozilla 1.6
Win 95+ / OSX.1+
1.6
A


Gecko
Mozilla 1.7
Win 98+ / OSX.1+
1.7
A


Gecko
Mozilla 1.8
Win 98+ / OSX.1+
1.8
A







[/code] 

Emre

[quote] As soon as you scroll back the distance of the skew, it repairs itself. [/quote]

Well that's true. After struggling a long period, I decided use an old lame hack.

[code]setTimeout(function () {oTable.fnAdjustColumnSizing();}, 50)[/code]

oprogfrogo

I use 1.9.4 and still get this issue. I've scoured Google for a fix but nothing works. Please advise Allan.

allan

Please link to a test case - http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read