Column headers misaligned until sort

dr3x

I'm seeing column headers misaligned on the initial load; then they align after first sort.

Here is a jsfiddle example, effect seems to be more dramatic when the browser window is less than full screen:
http://jsfiddle.net/dr3x/rP4qX/

This is a stripped down version of the actual code which is in a modal popup window; the code to dynamically set the height of the popup is invoked on a resize event.

The intention is for the column headers to be fixed and the rows to be scrollable.

Calling fnDraw() once the screen had been rendered seemed to workaround the issue

(Originally posted as http://datatables.net/forums/discussion/19857/column-headers-misaligned-using-sscrollx - please close that discussion as sScrollX was found to not be relevant here)

allan

Thanks of the test case. Unfortunately, I've just spent half an hour poking around with it and wasn't able to resolve the issue in that time. I'm going to have to come back to this when I'm not quite so pushed for time as I am at the moment. I'll download the example from jsFiddle and work on it locally when I do. I'll update here when I can.

Allan

dr3x

Thanks. Forgot to mention that the fnDraw workaround doesn't work consistently; in some environments within the body of the function it is not able to retrieve oSettings. Looks like it is trying to match a table object with an array of DT objects but the one it is trying to match doesn't look like any of the existing objects.

I will work on the example some more and see if I can strip away any of the irrelevant parts.

robertbrower

fnAdjustColumnSizing() after you init the datatable?

robertbrower

maybe you can use the info in this post. the code resizes a datatable to fit it's container. I use it when I put a datatable in a resizeable container.

http://datatables.net/forums/discussion/18014/how-to-vertically-resize-datatables#Item_3

allan

fnAdjustColumnSizing shouldn't really be needed in this case since the table is visible when it is draw. There is something very odd going on and I can't see what it is immediately...

Allan

jgoulet

Not sure if this is the same issue as before, but I've also noticed this behavior. If you recall late last year there was a Chrome bug that caused the headers not to line up properly. The Chrome bug is here:

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=290399

I updated it reporting that it may have resurfaced, as I am experiencing this same behavior again, but only in Chrome.

The old thread on these forums is here:

http://datatables.net/forums/discussion/17714/chrome-update-30-0-breaks-remote-bootstrap-header-column-sizing#Item_26

jgoulet

False alarm on my part. My issue stemmed from the use of Accordion with datatables. I had to make some CSS changes.

StuartF

Looks like this might be a dead topic, but we found ourselves running into a similar column misalignment issue. Essentially, the header would sometimes be offset 15 pixels to the right. It was a frustrating problem because it was intermittent.

In the end, we are applying a bit of a hack after loading our tables (using the rows.add() function):

$('div.dataTables_scrollHeadInner').css('padding-left', '0');
$('div.dataTables_scrollHeadInner').css('padding-right', '15px');

We found a padding-left: 15px style on the div, so the style update above resolves our misalignment problem. I can't find anywhere in the datatables js file where that style would be created, though. Still a bit of a mystery to me.