Reflow after container style change

[bluezed]

Great Plugin! Have used it for quite some time now but I've got a small issue here and I'm not sure if it's me who's doing something wrong or if it's meant to work like that...

Basically I have a table inside a container that has padding on the left. The user can click on an area to remove that padding and the table expands to the full page width but the header just stays in place.

Here's a JsFiddle of the basic concept: https://jsfiddle.net/gdr6euax/1

I'm using some transitions to animate the expansion and contraction but even without that the header does not expand or contract.

I have tried the "autoReflow" option but that does not make a difference either.

The only way to make it work for me is to explicitly trigger a "reflow" on the table but that does not look very nice with the transitions...
Here's the fiddle of the workaround with reflow trigger: http://jsfiddle.net/gdr6euax/2/

Any ideas?

[mkoryak]

yes,
the default layout mode for page scrolling is 'fixed', which is why you are seeing your issue. if you use 'absolute' then the table widths will be in sync:

https://jsfiddle.net/gdr6euax/3/

absolute requires the top of the floating table to be updated as you scroll, which can look laggy on mobile, and on crappy IE versions.

[mkoryak]

I spoke too soon, you still need to reflow to let the plugin know that the size has changed.

this is a bit better:
https://jsfiddle.net/gdr6euax/3/

i think that the problem here is that its not the table width that changes, but the page width which changes and causes the browser to re-layout the table, which the plugin has no knowledge of. so without the reflow it looks like it works because the browser re-lays out the view, but the plugin has no idea that the width changed.

the css animations also make it difficult

[mkoryak]

this is slightly better

https://jsfiddle.net/gdr6euax/4/

[bluezed]

Thanks a lot for looking into it!

I agree it's a tricky combination and not really an issue with the plugin as such. Was just trying to see if there's anything I was missing.

Anyway... I just had the idea to "destroy" the header when the user clicks and then when all animation is finished re-instate it. That seems to be working quite nicely and without too much visual impact...

See here: http://jsfiddle.net/gdr6euax/5/

What I'd need for this to use in my project would be a way to identify if a table actually has the floating header applied as I can have several tables on a page and some might have the floating header and some not. So I would need to be able to "destroy" and re-instate the header only for those tables. Is there an attribute on the table I can check to see whether or not the floating header is applied?

Thanks again :)

[mkoryak]

There is no attribute, but you can easily add one yourself:

$table.on("floatThead", function(e, isFloated, $floatContainer){
    if(isFloated){
        $floatContainer.addClass("floated"); // the div containing the table containing the thead
        $(this).addClass("floated"); // $table
    } else {
        $floatContainer.removeClass("floated");
        $(this).removeClass("floated");
    }
});

[bluezed]

Ah! That helps a lot! Thank you 😃

One more question though... the "floated" doesn't seem to get removed from the table when I "destroy" the header.
Looks like this call does not work $(this).removeClass("floated");
Does it not work with "destroy" maybe?

Here the fiddle: http://jsfiddle.net/gdr6euax/8/

[mkoryak]

destroy doesnt know that you added those classes to the table, so it will not remove them for you

[bluezed]

So the "floatThead" event doesn't fire on "destroy"?
I'm only asking because in the docs it says
"The plugin will trigger this event on the table when the header is floated and unfloated."
And the only way to unfloat I know is to use "destroy".

Is there another way?

Sorry for being a pain... I really appreciate your help here 👍

[mkoryak]

ah, i see what you mean. yes, it should fire it. let me fix that.

[bluezed]

Just tested it and it fires now 👍

Thanks a lot for your help!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.