Skip to main content

I built an app nav with multiple sub components and am running into an issue when I’m interacting with the sub-component variants. The app nav menu items can either be a singular nav item or a nested nav item with additional sub-nav items contained in it.

When I modify the variant to have a nav item be nested and in a selected state (showing the sub-nav items), the container hugs the content and pushes the other main nav items down. If I were to switch the sub nav state back to default or toggle off the nested nav item and try turning the selected state for the sub nav item, the container no longer hugs the content and the sub nav items overlap with the main nav items below. I’m trying to figure out if it’s the way I built this component or a bug. All the of the content in my sub-components are build with Hug content heights. 

I’ve included a video of the interactions I’m explaining and a screenshots of the subcomponents I’m using. 

 

Hi ​@Laurence_Beauchesne, thanks for reaching out!

Just a heads up, I noticed that you posted this topic twice, so we’ve combined them into one. 

From what you’ve described here, this seems to be a known limitation where changing the state on nested instances does not change the instance size. Our engineers are working on long term fix for this, but as this could impact the behavior of existing auto layout frames, it’s taking them some time to build out.


For now, as a workaround, if you add auto layout to each state of your set and assign the correct constraints you should be able to swap and see your frames correctly resize. Where elements are stacked on top of one another, you’ll need to apply Absolute position to the element sitting on top as explained in Explore auto layout properties.

Hope this helps explain! 

Terms & ConditionsCookie settings