Zurb Foundation 4 and Horizontal Scrolling

Zurb Foundation 4 and Horizontal Scrolling

cavalryjimcavalryjim Posts: 3Questions: 0Answers: 0
edited January 2014 in Bug reports
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'

Replies

  • cavalryjimcavalryjim Posts: 3Questions: 0Answers: 0
    edited January 2014
    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.
  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin
    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
  • cavalryjimcavalryjim Posts: 3Questions: 0Answers: 0
    Interesting. Thanks for the fix suggestion.

    Best regards,
    Jim
This discussion has been closed.