Body columns don't align with head columns
Body columns don't align with head columns
mr_flibble
Posts: 10Questions: 0Answers: 0
Hi,
I'm new to DataTables and I am experiencing a couple of problems. My first problem is that there is a gap between the head of my table and the body. I had a look at the CSS in Firebug and noticed that this was being caused by my own style sheet. Using Firebug to temporarily disable this line of CSS fixes the problem. However, when I write some CSS in the page to override the stylesheet for a permanent solution, the gap disappears but the columns in the body no longer line up with those in the head. When applying the temporary solution this problem does not occur. The CSS I'm using to override the style sheet is:
[code]table.dataTable { margin-bottom: 0px; }[/code]
I would appreciate any ideas on what I am doing wrong. Thanks.
My second problem is that the sScrollY parameter seems to be being ignored in the constructor, the table is always the same height.
Many thanks from mr_flibble.
I'm new to DataTables and I am experiencing a couple of problems. My first problem is that there is a gap between the head of my table and the body. I had a look at the CSS in Firebug and noticed that this was being caused by my own style sheet. Using Firebug to temporarily disable this line of CSS fixes the problem. However, when I write some CSS in the page to override the stylesheet for a permanent solution, the gap disappears but the columns in the body no longer line up with those in the head. When applying the temporary solution this problem does not occur. The CSS I'm using to override the style sheet is:
[code]table.dataTable { margin-bottom: 0px; }[/code]
I would appreciate any ideas on what I am doing wrong. Thanks.
My second problem is that the sScrollY parameter seems to be being ignored in the constructor, the table is always the same height.
Many thanks from mr_flibble.
This discussion has been closed.
Replies
Allan
I have put a minimal test case at: http://live.datatables.net/azewoh/3/edit
The sScrollY option is now honoured. However, if the height is set to 500px the columns are out of alignment, the alignment worsens from left to right. If the height is set to 400px the columns line up, except for being a constant 1 pixel out.
In my actual page, the sScrollY option does not work and sometimes the table does not appear at all. This only happens when using FixedColumns, without FixedColumns it seems to work ok. Without FixedColumns, the columns don't line up at all, but I think that is a separate issue. I will continue to look into it.
Many thanks
Out of interest, are you involved in developing the Vision of Britain site? It looks fantastic! I suspect amount about to loose what remains of the morning looking through the information on the site :-)
Regards,
Allan
I'm using Firefox 24 and Chromium 28.01.500.71 on Kubuntu 12.04 LTS . I have also tried Internet Explorer 10 on Windows 7. The problem remains the same with all of them. The columns line up at a height of 405px but not 406px. If I specify a height of 406px or greater the height becomes fixed at some height (I think 457px?) and the columns do not line up.
Yes, I am a developer at the Vision of Britain site. Currently the only developer, however. I'm glad you like the site :-) There is a lot of information on the site, you could be there a long time!
Thanks,
mr_flibble
I have just tried your new version (I didn't realise it was a different url). That seems to work fine, except the horizontal bar extends underneath the fixed column on the left.
Thanks for all your help so far.
mr_flibble
I've settled on jquery 1.8.3, since we are still using some deprecated jquery commands.
I have it working now. I had some problems integrating it with our jquery code for controlling tabs. It seems that the ready function for the tabs has to come after the ready function for setting up the FixedColumn data table. Strangely, when running on JS Bin it has to be the other way round:
http://live.datatables.net/azewoh/9/edit
The Google ads we have on our site also break the table, so I will have to leave these out.
Thanks again for your help.
This is intentional! The whole area is scrollable - so you can scroll while over the fixed area, but the fixed part stays where it is. I feel it gives a better representation of the table's position.
> Using jquery 1.9.1 rather than 1.5.2 seems to be what is fixing it.
jQuery 1.7 is going to be the new base version of DataTables and its extras in future releases.
> And your new version of FixedColumns. Will you be putting the new version in the stable branch?
Yes. FixedColumns 2.5.0 will be released alongside, or before DataTables 1.10 (likely December). There are still one or two cases of misalignment I want to address first.
Allan
Thank you for your response.
I'm still having a few problems. There are three problems, the first two problems don't show up on the test case but the third one does.
1) Sometimes the table is not contained within the tab but sometimes it is. It seems to be floating on top of some other page elements, whilst the page footer floats on top of the table. The problem instantly fixes itself if I open a Firebug window. The problem does not occur in Chromium, I've not tried Internet Explorer yet.
2) If I set sScrollXInner to some value less than 150% the header columns do not match up with the body columns. This seems to be dependent on the width of the table, the wider the table the less sScrollXInner can be decreased before the problem occurs.
3) When sScrollXInner is set to 100% bScrollCollapse does not work. This is assuming I have understood correctly what bScrollCollapse does. My understanding is that it shrinks the height of the table so that it initially displays a whole number of rows and no partial rows.
I could pm you the address of the test server if you are interested in taking a look. I don't want to make the address public.
Thanks
mr_flibble
Yes please.
I would say that sScrollXInner shouldn't be used at all, imho. I think I made a mistake putting it in at all. It forces the width to a particular value, rather than letting it take the natural value, which is going to be preferable. sScrollXInner will still be available in 1.10, but not documented.
Allan