Need help. Collapse when hidden does not work properly

Hey there!

I have two groups next to each other - Left and Right.
I have the right one hidden on page load and I need to switch between them back and forth.

For example, I need to hide the Left Group and show the Right Group instead.
When done so, the content of the Left Group is hidden yet the empty container of the Left Group maintains its position.

The same is true for the Right Group when hidden.

I have “Collapse when hidden” options chekced on both groups, so not sure why it is not working properly.

Hello @marat.avetisyan

  • Make sure that both groups have a parent group set to “container layout row”
  • If you need any or both of them to stay on their place when hidden then uncheck the option “collapse when hidden”

Hope this helps! :slight_smile:

1 Like

The parent group is the page itself which is already set to Row in Container layout.
The point is that I need to collapse the hidden groups hence the Collapse when hidden is selected.

How are you hiding the left group?

Please post the editor link so we can check the problem properly.

The Right Group is hidden through unticking the “The element is visible on page load” and the Left Group is hidden through Workflow element hide function upon a button click.

How can I share one single page from the editor instead of the whole project?

Thank you for sharing it, unformtunately it didn’t work for me either.
I also found out that similiar functionality across other pages are impacted too. So I assume it’s a bug on Bubble end.

I just submited a bug report to bubble.

I tried to replicate the problem. I have created two groups (left and right) and their parent is the page. And the parent has row layout. These two groups have 50% width. Right group is hidden on page load. Both of them are collapsed when hidden and animated.

I could successfully do the following operations. Am I missing anything? @marat.avetisyan

groups-l-r

2 Likes

Yeap … it should be straightforward as you kindly show @hergin :slight_smile:

This is core and simple Bubble functionality.

I am not sure what @marat.avetisyan may be experiencing

@cmarchan @hergin
I have put the groups into one container and recorded a video.

I guess the video still doesn’t say too much. Maybe send us the properties/layout of these two groups and the container. Because I did a similar thing in my app (like vertically hiding some group based on click on a button and vice-versa) and it works.

1 Like

Here are screenshots of the properties of each element -

Group container

Form 1 - Email Signup

Form 2 - Social Signup