ScrollX and scrollY: header misaligned with main grid body

pr3

Hi,

I've tried to implement both vertical and horizontal scrolling on my table following this example: http://datatables.net/examples/basic_init/scroll_xy.html but I find that when I scroll all the way to the right, my columns become misaligned. The main grid body has correct column alignment, but the header cells are not adjusted to allow for the offset of the vertical scrollbar's width.

EDIT: Further detail - the header is in a div called dataTables_scrollHeadInner and the body is in a div called dataTables_scrollBody.

Any advice?

JoelCool

I have just run into the same problem. It is aligned correctly until you scroll all the way to the right at which point they all look misaligned. If I click the left scroll arrow just once then they are all aligned again and you can see the header background color just above the vertical scrollbar. I'm still looking to see what sScrollXInner is used for as I see it in examples.

Did you find the solution? Perhaps Allen will chime in.

allan

Do you have border-collapse:collapse; on your table in CSS? That can cause some funky things to happen with the calculations and results in misalignment. Have a look at this post: http://datatables.net/forums/discussion/9350/scrollable-datatable-header-is-not-alligned-with-data/p1#Item_4

Allan

Elvenbane

Same Problem here... Nothing happend if i remove the border-collapse:collapse option.

Any other solutions?

JoelCool

Allan, I did have border-collapse on. However turning it off did not help. So I decided to mock up a super simple version that I could put on the net to illustrate the problem. I tested in Chrome, IE, and Firefox all with different results. In Chrome you only see misalignment when scrolled all the way to the right. One click of the left arrow on the horizontal scrollbar and they re-align. In IE9 they are misaligned right away without scrolling at all. Firefox is similar to Chrome except it takes two left clicks before everything is aligned again.

Please see my test page at: http://chronosrealty.com/datatables/

It seems like it's directly related to the vertical scrollbar. Are there any further configuration parameters that can be used to resolve this?

allan

Can you upgrade to 1.9.1 please. This issue should be addressed in the new version.

Allan

JoelCool

Tested in Chrome, Firefox, and IE9. Perfect! Thank you so much Allan. Beer money is coming your way \_/

allan

Thanks very much - very much appreciated. All the more so for a beer on a Friday evening :-)

Allan