What are you trying to do?
I’m trying to create a collapsible stack where the height goes to 0 essentially collapsing its children; this stack is placed on a vertical stack set as hug content, meaning when the component collapses the vertical stack should too.
the issue is that even though the stack collapses the parent is still respecting the height of the child which is no longer visible. i even have overflow off but the bug still happens.
this glitch essentially happens when you have a hug content stack, with another hug content stack inside that has max height as 0% with whatever children you want inside. the first parent will keep the children height even though its not visible.
here are some pictures to better explain myself.
as you can see even though the wrapper height is 0 the parent stack takes the child’s height and does not collapse.
its important to add that this issue only arises when I use percentages for the collapse, here is the setup: wrapper box (hug content) that collapses by changing between variants by adjusting max-height (e.g., 100% to 0%).
I’m doing it specifically like this because the animations in plasmic only trigger if the state 1 and 2 are of the same format and have numbers which is a completely different issue on its own. in other words if I were to go from “hug content” in the base state to “0px” on the collapse state the transition animation will simply jump and ignore the ease transition. the only way I managed to animate the change was with leaving the hight as “hug content” and change the max hight from 100 to 0m if the animation were to work when the hugged content changed heights that would solve the whole issue.
I also can not cheat it by using a max height 5000px and then 0 because I have other variants for height and width, 10%, 20%, 30% etc etc, the main idea is for this collapsable wrapper to collapse items form 100 to 20% and back while keeping the growth and shrink animation and reorganizing items in the modal.
the whole issue arises from the animations not working between hug and a value, but I just cant think of another solution.
What are the reproduction steps?
-
Create a child element with a fixed height (300px).
-
Place the child inside a wrapper box (hug content) with a max-height at 0
-
Place the wrapper box in a parent stack (hug content).
-
Observe how the parent doesn’t properly collapse to 0
Relevant Links:
• My Project: Plasmic
thanks for the help