FixedColumns issue (test case example provided)

andrewjohnknox

http://live.datatables.net/ulileh/17

All browsers seem to have an issue with the fixed column alignment and IE (up to 9 that I tested) has issues with the non-fixed columns as well.

Thank you,
Andrew

allan

Thanks for the test case. I'm not sure what is going wrong there on a quick glance, but I will look into it further.

Regards,
Allan

andrewjohnknox

Awesome, thank you Allan, much appreciated.

Regards,
Andrew

allan

Sorry for the delay for me to look into this. It looks like it might be quite a tricky one (or very simple depending on the approach)!

The problem comes about from a different padding being applied to the TH cells from the TD cells. In the DataTables default CSS we have something like:

[code]
th { padding: 3px 18px 3px 10px }
td { padding: 3px 10px; }
[/code]

The extra 8px of padding on the header cell is to allow space for the sorting icon. However, this appears to upset the browsers, since the TH cells in the 'body' part of the scrolling table don't have any content - so it looks like the browser switched to using the padding from the body cells, which I hadn't been expecting.

If we add the following to the CSS:

[code]
td { padding: 3px 18px 3px 10px !important }
[/code]

the problem goes away - http://live.datatables.net/ulileh/19/edit (I've also used CSS border the border rather than the HTML attribute as that has a small effect as well).

So the moral here is to use the same padding for all cells in the table (or at least be consistent down a column).

I think the solution here is probably to change the default DataTables CSS to be consistent. The one problem with that is 18px is quite a lot of default padding for left and right (it should really be balanced), so actually, before doing this I'm going to introduce a new option to DataTables to have the sorting icon in a separate element, which will force the header to have that extra width. This is the default in jQuery UI mode and I'm going to make that generic to be usable outside of jQuery UI mode as well. Might even make it the default mode in 1.10.

Regards,
Allan

andrewjohnknox

Thanks for looking into that for me Allan, much appreciated - I'll integrate that change on my end when I get a chance. I've got another fixed columns / hidden columns / < IE8 issue for you, I'll get another post and sample up shortly ;)

Regards,
Andrew