fixed headers with bootstrap collapsible button

izenn

i have a table that is in a collapsible div, however, for the life of me i can't get fixed headers to work.

Here is the demo page:
http://padbox.izenn.net/demo.html

i've tried calling fixed tables both in datatables and as a constructor, to no avail.

any help is appreciated.

thanks!!

kthorngren

Does FixedHeader work if it starts out in a visible div?

Not sure if this is the problem but you are using Bootstrap but not the Datatables Bootstrap integration files. You can use the Download Builder to get the correct Datatables and FixedHeader files for Bootstrap.

Kevin

izenn

the fixed header does work if the div starts out visible. Demo.html has been updated with the downloadbuilder files.

kthorngren

Does it work if the div stats as invisible?

The demo starts with Datatables visible. Toggling it doesn't seem to break fixedHeader.

Kevin

izenn

if the div starts as collapsed/invisible fixedHeader does not work. see http://padbox.izenn.net/demoinvis.html

kthorngren

Sorry I should have thought of this earlier. Try fixedHeader.adjust() when you make the div visible.

Kevin

izenn

excuse my ignorance, but where would i put that? i tried after the constructor, but that doesn't seem to be activating. (i'm a bit out of my depth)

thanks

izenn

using the fixedHeader.adjust() i was able to add a call to the collapse:

$(".collapse").on('shown.bs.collapse', function(){
    box.fixedHeader.adjust();
});

however, now the column widths are adjusting for the floating header and not staying how they are supposed to (see demo here (rem plus tab): http://padbox.izenn.net/demo.html

izenn

i found my issue for the column widths -- my demo page was still using an old version of the fixedheaders.js