Table is not recalulated correctly after hiding/showing some columns
Closed this issue · 6 comments
I have a table with some columns the user can hide/show by hitting a button.
After hiding (or showing again) these cols, the whole table is not displayed correct in full width.
Fiddle here: https://jsfiddle.net/OSWorX/57p3a1b2/1/
Using latest version of floatThead.
Mentioned already and tried the solution of here (which works in my backend): #468 (comment)
But maybe you have a better (or correct) solution for this issue?
does this work any better for you?
Many thx for your quick answer - is not urgent, but should work.
I cannot see any difference, the column after hiding some should expand to the whole table.
Maybe this could be achieved with a ...each( function() { .. }) looping through all children instead of setting a fixed column and width (as it is right now):
setFloatTheadColumnWidth($table, 1, '25%');e.g.:
setFloatTheadColumnWidth($table, 'auto');Knowing the problem to solve does help.
This should work better:
https://jsfiddle.net/gy93mzxh/
Your problem was that you are showing/hiding some columns using a 400ms animation, so you should be reflowing floatthead after that animation completes.
There is still an issue here where showing the columns changes their height, but has something to do with the jquery toggle animation. It appears to be changing the height of the things its acting upon when you run it. I dont know why it picks an incorrect height to grow to when you show the columns.
My suggestion would be to try the following solutions:
- Use a different animation, or dont use an animation at all. If you dont use an animation then you dont need to wait for it to complete and just reflow after showing or hiding the columns. If you do use an animation, maybe there is an opacity animation that you can use instead.
- set a max-height on the columns in css if you can know what that number is, or set it on them via js if you must calculate that value when the table first loads.