Another misaligment with reproducible test

Another misaligment with reproducible test

marianopeckmarianopeck Posts: 53Questions: 8Answers: 0
edited October 2013 in DataTables 1.9
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,

Replies

  • marianopeckmarianopeck Posts: 53Questions: 8Answers: 0
    Ouch it seems one of my comments get lost.... so I will write it again...
    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?
  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin
    This is a bug in DataTables I'm sorry to say. On the plus side, its already been fixed in the 1.10 wip branch. Here is your example using the latest code: http://live.datatables.net/oxazoj/12/edit . I'll be merging 1.10 down to the master branch soon (next week or so I hope) at which point it will appear int he DataTables nightly build.

    Allan
  • marianopeckmarianopeck Posts: 53Questions: 8Answers: 0
    Hi 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!
  • marianopeckmarianopeck Posts: 53Questions: 8Answers: 0
    In fact, when you scroll horizontally to the most right, that little piece of the header above the vertical scroll, disapppears...

    Thanks Allan!
  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin
    > Also, I thought that the nighly build would download the very latest code.

    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
  • marianopeckmarianopeck Posts: 53Questions: 8Answers: 0
    Allan, you have a reply to everything I report :) That was helpful!!!

    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.
  • marianopeckmarianopeck Posts: 53Questions: 8Answers: 0
    Hi Allan, I guess you still didn't have time to take a look, did you?
    No problem, just checking!
  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin
    i'm barely keeping my head above water at the moment I'm afraid. No, not had a chance to dig into this properly yet. Hope to sometime soon, but can't promise when as there are too many other pulls on me just at the moment :-(.

    There is never time for the fun stuff...

    Allan
This discussion has been closed.