Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Height 0px on foldable unfold

See original GitHub issue

Issue Description

Hello, 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: Screenshot 2022-02-01 at 1 19 01 PM

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:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

cocoponcommented, Mar 28, 2022

Thank you for creating the example! It’s very helpful. This should be fixed by #383, please wait for the next release.

repalashcommented, Feb 4, 2022

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:

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fluid css fold/unfold animation when having auto height
Fluid css fold/unfold animation when having auto height - auto-height-folding.css.
Read more >
Modify height of fold/unfold effect - Stack Overflow
I'm having a issue with the fold height. Ideally I need each fold to have a different height, however in the folded state...
Read more >
User Guide How to Fold & Unfold and Adjust the ... - YouTube
User Guide How to Fold & Unfold and Adjust the Height of Walking Frame | DNR Wheels Mobility Aids. 3.5K views 2 years...
Read more >
JetTricks: Unfold Widget Usage Tutorial - Crocoblock
Unfold widget for Elementor from JetTricks plugin is one of the space-saving widgets that can help you to organize the appearance of the...
Read more >
How to fold a DOM node | CSS effects - Josh W Comeau
In this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in real-life. On that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found