Body columns don't align with head columns

mr_flibble

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.

mr_flibble

I forgot to mention, I'm using the FixedColumns extension.

mr_flibble

The sScrollY option works if I don't use the FixedColumns extension.

allan

Please link to a test case: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read . Without a test case I can't help, but I'd really like to as I know there are some issues with FixedColumns - but I don't have any examples showing the problem that I can work with to resolve them!

Allan

mr_flibble

Hi 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

allan

What browser / version is it that you are using? I've just tried your example if Safari and Firefox and it appears to align the columns correctly. I've also modified it a little to use the latest FixedColumns nightly: http://live.datatables.net/azewoh/4/edit - which appears to work as well.

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

mr_flibble

Hi 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

mr_flibble

Hi Allan

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

mr_flibble

Using jquery 1.9.1 rather than 1.5.2 seems to be what is fixing it.

mr_flibble

And your new version of FixedColumns. Will you be putting the new version in the stable branch?

I've settled on jquery 1.8.3, since we are still using some deprecated jquery commands.

mr_flibble

Hi Allan

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.

allan

> That seems to work fine, except the horizontal bar extends underneath the fixed column on the left.

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

mr_flibble

Hi 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

allan

> 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.

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