Problem with header using Datatables inside jQuery UI Tabs and scrolling

fcaceres

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.

angelinux

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.

jkarr

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.

allan

Have you all seen this example: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

Allan

jkarr

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.