Auto layout on "Accordion" component not functioning properly

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:

Sub 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? :frowning:


When I “Detach instance” on the filter panel, it behaves as expected

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!

1 Like

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.