Fixed Header dissapers when using container-fluid with bootstrap

theAnimalix

I wanted to use "container-fluid" bootstrap class to make my page wider, but that breaks the Fixed Header which works with standard "container" class. Any suggestion how to fix that behavior?

This is the JS I use:

 new $.fn.dataTable.FixedHeader( table, {
        header: true,
        headerOffset: $('nav div.container').height()
    } );

allan

Could you link to a test page showing the issue so I can debug it please?

Allan

theAnimalix

My page is still offline so I can't easily link. For now I've quickly prepared the template here (basically ZF2 skeleton + datatables): http://jsfiddle.net/rcdtkqr6/

If that won't help or if I don't find the solution I will share the private link here.

Thanks again for support and great plugin! ...most thing just seem to work as it's meant to work, else it's extendable. :)

allan

Hi,

Thanks for the JSFiddle links.

Two issues there:

1. The nav div.container height was returning null. Just using nav give the height of the fixed element.
2. The fixedHeader.headerOffset option was introduced in v3.0.0. The page was including 2.1.1.

Working version: http://jsfiddle.net/rcdtkqr6/1/ .

Regards,
Allan

theAnimalix

You are right, that was the problem. Thank you very much, I should have figured that out on my own.

theAnimalix

I've noticed that header is broken when I visit my website via mobile browser (for some reason it's not visible when scrolling through the table but it only appears at it appears under the table - under page footer exactly) and I don't seem to be able to reproduce that on PC. Any idea what would be going on?

EDIT: Sorry, my bad. While the library folder names contain upper casing for word initials (FixedHeader) and I used lower cap for (fixedHeader) dependencies, that didn't work on Linux, while it worked on Windows.