trying to fix column misalignment between row headers and body

Pierce Krouse

Others who have seen this problem have gotten around it by removing any custom css.
I cannot do that, and almost got things working by altering the default datatables css. However, I still can't get things to line up properly.

My next course of action was to iterate the columns in the main table's 0-height headers, capturing the widths, and applying them to the columns with improper widths.

You can fiddle with my current results here: http://jsfiddle.net/3mdpskL2/

It's only off about a pixel on chrome, 5 pixels more or less on firefox, but it is WAAAY off on ie.

At the bottom of the javascript section, you will see where I have gone through the column width exercise, and I have commented out the various table redraw attempts.

I have verified that I captured the proper column widths, but after the width update, the table remains misaligned.

Any ideas on this? I am out of options at this point.

allan

Hi,

Thanks for the test case. I'm looking into this at the moment - it isn't immediately obvious why it isn't working I'm afraid so I don't have an instant answer... I'll get back to you as soon as possible.

Regards,
Allan

allan

A quick update on this in case anyone else finds this post and is interested in the resolution. I found an issue with the sub-pixel calculation for how columns are being calculated and drawn in DataTables and its integration with the browsers. This was really obvious in IE, while Chrome was very tolerant.

I've committed a number of changes for this to DataTables core which will be included in the 1.10.10 release.

Allan

ubragg

I'm seeing what appears to be the same issue in 1.10.10, but when using the Bootstrap libraries (my earlier comment thought it was due to FixedColumns, but it isn't). I'm not sure if this is a problem with Bootstrap or the DataTables implementation on top of Bootstrap, but it is pretty easily reproducible:

http://jsfiddle.net/Codiak/x08rhv7w/

Perhaps the sub-pixel calculation fix needs to be propagated to the Bootstrap code?

allan

If you add the class table-bordered it will work as expected: http://jsfiddle.net/x08rhv7w/10/ .

It looks like the DataTables / Bootstrap stylesheet has an issue when there are no Bootstrap classes assigned. I'll look into that - thanks for letting me know.

Allan

ubragg

Excellent, thanks for the quick response!

ubragg

I ran into another similar issue when dealing with footers. Again the problem only seems to be when using Bootstrap, but this time the "table-bordered" fix didn't do it.

Here is an example without Bootstrap:
http://jsfiddle.net/Codiak/60voh80o/1/

and with Bootstrap:
http://jsfiddle.net/Codiak/60voh80o/2/

You can see the issue by scrolling to the right. When Bootstrap is being used and I scroll all the way to the right, the header behave properly, but the footer does not and keeps on scrolling when it shouldn't. (You may have to reduce the width on the output window to make sure X scrolling is active.)

allan

Wow - JSFiddle has had a UI update!

Thanks for the link - that most certainly does look like a bug. I'll look into it, but it will probably be next week now.

Allan

ubragg

No problem, thanks for looking into it!