Zurb Foundation 4 and Horizontal Scrolling

cavalryjim

When trying to enable horizontal scrolling, the header does not scroll with the table body. I am using Zurb Foundation 4 & Rails 4.

[code]
$('#animal_table').dataTable({
"sPaginationType": "foundation",
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"bStateSave": true
});
[/code]

Example can be seen here:
http://www.dooliddl.com/organizations/2
login using: 'temp@temp.com' & 'password'

cavalryjim

The problem seems to be when I require the the dataTables.foundation.css file.
[code] *= require dataTables/jquery.dataTables.foundation [/code]

As is seem to work (with the exception of the the headers / columns slightly off alignment) with including only the dataTables.css.

[code] *= require dataTables/jquery.dataTables [/code]

**Correction** While not including the dataTables.foundation.css appears to work at first page load, the header & columns are not aligned. When sorting by other columns (or increasing the # of records to be show), the table starts acting weird and dramatically increases in width.

allan

Looks like your table is being initialised while hidden. This means that it has no height / width, and therefore DataTables cannot align the columns.

For example, if I load your page and then run the function:

[code]
$('#animal_table').dataTable().fnAdjustColumnSizing()
[/code]

it corrects itself.

You need to use fnAdjustColumnSizing when the table is made visible.

Allan

cavalryjim

Interesting. Thanks for the fix suggestion.

Best regards,
Jim