Another misaligment with reproducible test
Another misaligment with reproducible test
marianopeck
Posts: 53Questions: 8Answers: 0
Hi All/Allan.
Thanks for helping me solve the misaligment from the last time. Did I told you my webapp has many tables? ;)
Ok, now I found another misaligment but the good news is that I have a reproducible test. I cloned the final state of: http://live.datatables.net/oxazuh/69/edit
so that start with the previous problem fixed.
The new problem is in: http://live.datatables.net/oxazoj/3/edit
Please, scroll horizontally until the end, because the misaligment happens mostly at the last columns.
Something else that is IMPORTANT: I think it only happens if there is a vertical scroll. Look version: http://live.datatables.net/oxazoj/4/edit
there I only changed "sScrollY": ( 0.7 * $(window).height() ), to 1500px (so that no vertical scoll is needed)....and that works... so it must be related to that.
Thanks in advance,
Thanks for helping me solve the misaligment from the last time. Did I told you my webapp has many tables? ;)
Ok, now I found another misaligment but the good news is that I have a reproducible test. I cloned the final state of: http://live.datatables.net/oxazuh/69/edit
so that start with the previous problem fixed.
The new problem is in: http://live.datatables.net/oxazoj/3/edit
Please, scroll horizontally until the end, because the misaligment happens mostly at the last columns.
Something else that is IMPORTANT: I think it only happens if there is a vertical scroll. Look version: http://live.datatables.net/oxazoj/4/edit
there I only changed "sScrollY": ( 0.7 * $(window).height() ), to 1500px (so that no vertical scoll is needed)....and that works... so it must be related to that.
Thanks in advance,
This discussion has been closed.
Replies
It definitively has to do with the scrolls, as I pointed out in the previous comment. To reproduce it you have to vertically scroll up to the most right (at the very very end). Then, at that moment, the misaligment happens. It looks like if we could scroll the body horizontally just a bit more (the size of the vertical scroll), but only the body, the header does not scroll that bit more, and hence the misaligment. This only happens when scrolls are present.
I put a blue color to the header so that you can more easily see what I mean: http://live.datatables.net/oxazoj/9/edit
Also, putting "sScrollXInner": "100%", "fixes" the problem, because it makes the table horizontal scroll disappear and we use instead the browser horizontal scroll..so the bug is not present there. See: http://live.datatables.net/oxazoj/10/edit
Using "sScrollXInner": "100%" breaks most of my tables...so I cannot set it ....
Also, to better see what I am trying to explain, take a look to this version: http://live.datatables.net/oxazoj/11/edit
and look the rop right corner of the table while scrolling horizontally.... Do you see that piece of header above the verticall scroll?
Thoughts?
Allan
I didn't know there was a 1.10 branch, otherwise I would have test it before! Also, I thought that the nighly build would download the very latest code. Anyway...I tried what you said and indeed it is fixed!! There is thought a small thing. Look what happens when using FixedColumns:
http://live.datatables.net/oxazoj/13/edit
While scrolling horizontally left/right, see the part of the header just above the vertical scroll on the right... it just moves when you scroll.... I think it would be nice if the whole header could be as the same width of the body but without the scroll bar, right?
Thanks!
Thanks Allan!
Yup - from the master branch. I should probably just merge the 1.10 branch down just now since its beta ready. I'm hesitant because of the lack of documentation!
For the header with FixedColumns - you want a little bit of CSS:
[code]
div.DTFC_Blocker {
background-color: white;
}
[/code]
There is an element on the page to hide that ugliness, but it needs a little styling.
Allan
Thanks Allan. I have almost everything I need to be fixed for my app. That's pretty cool. I was running away from another jquery plugin, FixedHeaderTable.
No problem, just checking!
There is never time for the fun stuff...
Allan