Problem with header using Datatables inside jQuery UI Tabs and scrolling

Problem with header using Datatables inside jQuery UI Tabs and scrolling

fcaceresfcaceres Posts: 5Questions: 0Answers: 0
edited January 2013 in Bug reports
Hi All,

I am using many datatables inside several jQuery UI Tabs and I have a problem with the headers of every table while using YSCROLL. They completelly get missalign and seem to float a bit to the left while the tbody remains constant. When I click on the header the header gets magically aligned. The headers should be aligned from the begining so the user has a better user experience. I tried modifying several selectors but I had no luck. I have included a screenshot of the problem here: .
If you have any idea on how to correct that problem Please help.
Thank you in advance.



  • angelinuxangelinux Posts: 1Questions: 0Answers: 0
    Having exactly the same issue.
    Making several test I'm now sure the bad interaction is caused by the use of the tab.
    I had to workaround the issue using the Kirk's way on the Kobayashi-Maru test. I've changed the user requirement. Now he wants an accordion, and it works fine.
  • jkarrjkarr Posts: 2Questions: 0Answers: 0
    I am having this exact issue. I have duplicated it on JSFiddle:

    Notice that it work properly on the first tab, but the second tab is where the display is not correct.

    Any help would be appreciated.
  • allanallan Posts: 58,315Questions: 1Answers: 9,331 Site admin
    Have you all seen this example:

  • jkarrjkarr Posts: 2Questions: 0Answers: 0

    Thanks for posting that. I just now saw the example and was going to post a reply. My example has been updated with the fix:

    Thanks again.
This discussion has been closed.