Height 0px on foldable unfold
See original GitHub issueHello, I have come across an issue where when we expand the folder, the height of the container element (in FolderView) is set to 0px. So in the UI, folder content gets overlapped with whatever is below it.
This is how it looks:
I have tried to pinpoint the issue, and found that it’s been set because of shouldFixHeight
in foldable.ts:51
shouldFixHeight is set to true even after the folder is expanded, so it looks like the transitionend
event is not fired which resets this shouldFixHeight after which the height is set to auto.
According to the transitionend docs, there are many cases where this event does not fire, like when the transition is cancelled, if there is no transition duration or there is no transition (like from 0 -> 0px).
To fix this, I guess there should be some way to reset shouldFixHeight
, expandedHeight
without relying on transitionend
or handling the cases where this event is not called.
I hope I was able to explain the issue.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Thank you for creating the example! It’s very helpful. This should be fixed by #383, please wait for the next release.
Hello, I have quickly forked the tweakpane codesandbox to show the issue. This happens when you toggle folder.expanded at some places. The change are lines 157-159 in the default example. Link: https://codesandbox.io/s/tweakpane-playground-alga-forked-ru34o?file=/src/index.js
This is just one case where
transitionend
is not called. There would be more as mentioned in its docs.This is how it looks in Chrome 97, Mac OS 12.0.1.![Screenshot 2022-02-04 at 12 07 10 PM](https://user-images.githubusercontent.com/7613915/152484274-08991139-d3a0-474d-840d-ab7fc948c032.png)