footer width not aligning with table

bigerock

Because my datatable is wider than the container, I've made the main div overflow-x to scroll. I'd prefer a way to make the table itself scroll because the footer becomes misaligned to the table. Please see the screenshot.

ScreenShot:
https://db.tt/KpXyI6l9

Is there a way to specify that the table itself have a surrounding div that i can then set to overflow-x?

I know there's a surrounding div that does get created by the plugin itself, but it creates the and the as sibling nodes. Therefore, putting an overflow-x on the that surrounding div makes both of them scroll. But i only want the to scroll.

Hope that makes sense.

allan

Not sure what would cause that I'm afraid. Please link to a test case so we can take a look and debug it.

Allan

bigerock

Ok, i figured out a work around. Using fnDrawCallback, i just wrap the table in a div. The code looks like this:

[code]'fnDrawCallback': function( oSettings ) {
if ($('#datatableWrap').length == 0){
$('#tblSubmissionsDataTable').wrap('');
}
}[/code]

tblSubmissionsDataTable is the table itself
datatableWrap is wrapping just the table. that way, the table is inside it's own wrapper and the footer is now outside of that. this allows me to scroll just the table wrapper itself.

here's the outcome:

screenshot:
https://db.tt/eYiNm0P3

maybe it will help someone else.

allan

Thanks for posting a workaround. If you are able to link me to a test page showing the issue, that would be great as I'll be able to put a fix into DataTables rather than needing a workaround.

Allan

bigerock

Ok, hopefully i've illustrated the issue with my examples. Scroll the table horizontally in both examples and you should see the issue and the fix. I highlighted the footer pagination red so you can see the "issue".

problem:
http://live.datatables.net/exemuw/5/edit

solution:
http://live.datatables.net/adeqah/3/edit