scrollX causes style issues when hidden table container becomes visible

cbtdev

I am initializing a DataTable that is inside a hidden container. If the DataTable has the scrollX option explicitly set and the container becomes visible, the DataTable elements show up but the the table rows are still hidden. Also, the column headings are pushed to the left. Then, clicking on a column heading will show the rows but they are squished in the center of the DataTable container.

This behavior cannot be reproduced when the scrollX option is omitted.

Please see this jsfiddle for working example.

Any help resolving this issue would be greatly appreciated.

Thanks!

allan

Hi,

The problem is that the tables aren't visible and therefore they don't have any height or width available for the calculations needed by the scrolling actions. The way to address this is with the columns.adjust() method:

        var tables = $.fn.dataTable.tables(true);
        $( tables ).DataTable().columns.adjust();

Updated Fiddle.

Frustratingly the Fiddle still has a rendering issue there, and I'm not immediately sure what is causing that. I'll look into that first thing in the morning!

Allan

cbtdev

Thanks Allen! I had a feeling it had something to do with calculating hidden dimensions, but I wasn't sure where to go from there.

I will await your response regarding the rendering issue.

Thanks again!

allan

This was a bug caused by a change in 1.10.5 unfortunately. I've just committed the fix and it is now in the nightly if you would like to use it immediately.

I've updated the fiddle here to show it working correctly.

I'll probably release 1.10.6 next week as this is a nasty little bug!

Allan

cbtdev

Thank you so much for the quick turn around on this. I greatly appreciate your efforts!

elcollie

Using 1.10.7 I had a similar issue for tables in tabbed content. I used your fix and it worked well.
$(document).on('click', ".tabbedTable", function(e) {
$('table').DataTable().columns.adjust();
});

My question is, is this a DataTables bug to be fixed in future release or will I need to maintain the above work around?

allan

in tabbed content

This is the key point in your comment. When the table is initialised in a hidden element it has no height or width. Therefore the column alignment simply cannot occur. You must call the columns.adjust() method when the table is made visible. There is an example of that available on this site (although embarrassingly it doesn't appear to be showing the tabs at the moment!).

This is not a bug in DataTables, but rather a side effect of using hidden elements.

Having said that, I do have a plan for how to make this happen automatically in future - see this blog post for details. I'm actively considering that for 1.11, the biggest stopping point at the moment is that IE requires a solid background colour to stop a border showing up that can't otherwise be removed (haven't tested Edge with it yet).

Allan

elcollie

Great, thanks, keep up the good work!
Col