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: http://fcaceres.net/problem_datatables.png .
If you have any idea on how to correct that problem Please help.
Thank you in advance.

Fred.

Replies

  • 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: http://jsfiddle.net/hn32d/2/

    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: 63,381Questions: 1Answers: 10,449 Site admin
    Have you all seen this example: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

    Allan
  • jkarrjkarr Posts: 2Questions: 0Answers: 0
    Allan,

    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: http://jsfiddle.net/hn32d/3/

    Thanks again.
This discussion has been closed.