Headers not lining up

barrykeepence

I am using datatables in an application and I am constantly battling the headers not lining up with the contents. I even have a page where it works on first load but a reload messes it up.

There have been many reports of people having the same issue.
I have tried using fnAdjustColumnsizing. I have tried autowidth as true and false.

What is the sure fire way of getting this to work consistently?
Surely there is a real issue here?

If you are seeing the same issue then please comment on this post.

barrykeepence

I have had a detailed look at the styles in webkit. The first thing I found is that if your th and td have different amounts of padding then things get messed up - easy fix.

The next thing I found was that the scroll header and the scroll body are set to different widths.

The top table (the actual header) and the second table (the body) are different widths. The header table has a right paddingof 8 pixels and the body does not.


The outer div has a width of 1140px and so they do not line up. It is almost as if the table expects a scroll bar when one is not there!

Sometimes it renders ok with no padding and exactly the same code then loads with the padding back.

Chasing ghosts!

allan

Can you link to a test case showing the issue please?

Allan

barrykeepence

I have been playing around with this for hours and now I can't recreate it!

I have a pretty good hunch I know what is going on though. The header and body were misaligned when the data was on the edge of requiring a scroll bar or not. It seems that when the page sometimes renders, it looks like the body table div will require a scroll bar - and when rendered fully it does not. the misalignment is exactly the same width as the scrollbar I have on another datatable on the page - which has a very large amount of data and always shows a scrollbar.

The variable timing of the loading was enough to make it happen sometimes and sometimes not. If I added a comment to a css file and reloaded the page it would render incorrectly and then correctly on the next load!

Having a good look at the design - very nice. I see the body with the 0px height header row with the same widths as the first table - nice. I can see why my crazy paddings were messing that up - may be worth a note in the documentation to warn people.

I hope this helps.

allan

Thanks for the information. I'll certainly keep an eye out for this in future :-)

Allan

barrykeepence

I had a good look through the unminified code and it does look like you are detecting a y scrollbar when there is not one in the final render. The line adding the padding is clear. It looks like your code runs this when it thinks there is a scrollbar but there is not one. I can see it is a difficult problem area.

BTW all this testing is done in Chrome and Safari

allan

Problem is I'd need a test case to understand why it is detected a scrollbar when there isn't one.

Allan

barrykeepence

If I get something repeatable I will post it.