Headers not lining up
Headers not lining up
barrykeepence
Posts: 22Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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
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
BTW all this testing is done in Chrome and Safari
Allan