Hello!
I’m hoping someone can help me fix this issue I’m having. I’m prototyping a side menu for our web app - the main component works perfectly, however, the sub component does not work at all. Open variants of any of the menu items do not push the other content down, instead they overflow their “closed” state
Main/Parent Component:
When changing the variant of each menu item, the container/container size “stays the same” and does not push the content down like it is supposed to. What am I doing wrong?
Does anybody have the solution for this? It feels like it’s a really common use case - I’m trying to achieve a similar thing and I’m getting all sorts of bugs. The issues with expanded components overflowing each other for me had something to do with “constraints” (top left) hiding that element at the top of the list. How did I solve it? I hit CTRL+Z until “constraints” went away. Not exactly a solution! Currently, none of my sub-nav elements hold on to their unique text labels, they just revert to “sub-nav”… should this type of accordion nav component really be this difficult? You could throw it together in minutes with Bootstrap or another free, off-the-shelf CSS/JS solution!
I’m having the same exact issue. I’m using accordions in a main menu. Similarly, if I detach instance of the main menu’s component it works. But, this is for a design system, so I can’t have everyone detaching instances.
Same issue here for the last year. Very counter intuitive that the accordion instance cannot prototype correctly. Detaching the instance works, but creates extra work.
Hopefully Figma can address this soon
That’s also the reason why detaching it worked, because it didn’t preserve overrides after the detachment.
My advice is to check: (1) layer names, (2) Constraints if not in auto-layout, and (3) auto layout properties properly from the very start so that it’ll work as planned.
(I’ve used the same implementation you’re trying to do in this vid)
