Remove Empty Spaces in the Page Dynamically

[sriram]

I have a page where there are several independent groups with hide and show condition. Each group is of different height and when i try to hide and show., this creates a gap between two groups.

Lets Say there is a group A of height 80 and another group B of height 40. Both of them start at X axis 10. Now i have another group C below these two at the x axis 90. When i hide group A and show Group B, the gap between group B and Group C will be around 50 rather than the previous gap of 10.

I would like to know if there is a way to maintain consistency in the gaps between two groups despite having different heights.

I have attached the screenshots of Both the scenarios below for better understanding.

Image 1

Image 2

[fayewatson]

Hi @sriram Do you have “Collapse this group’s height when hidden” for each of the groups?

Or does that not collapse the empty space at all times since some of the groups have the same X position and are overlapping?

[sriram]

@fayewatson Do i have to do something with the group below to make this work, i tried adding this collapse condition to the groups present above, but it did not make any difference.

Should i have all these groups under a whole group or it can be independent groups?

I am not sure if i am doing this correct.

[fayewatson]

Are the groups overlapping in the editor? If so, that can prevent the collapse from occuring. I would recommend having separate groups within one large group, and vertically stacking them in the editor in this way if possible

Preview:

Bubble - Visual Programming

Editor:

Bubble Editor - faye-demo-app

[fayewatson]

My apologies, I should have set it up more similarly to your screenshots. In this example, there is no space between the different-colored groups (so that the orange groups moves to the top when the red group collapses). You can use the same setup where the groups are almost touching each other, and then set all of those groups’ background to be transparent.

Then, place the white ‘inside group’ elements within each of those ‘outside transparent’ groups. That way it would have the 50 pixel margin between groups, but that margin would also collapse since the entire ‘Outside Group’ is collapsed.

Here is the updated version!
Editor:

Bubble Editor - faye-demo-app

Preview:

Bubble - Visual Programming

Here the groups are set up in this structure:

Each ‘square’ has the outside group (with the transparent background):

And an inside group (with the colored background and the content):

This repeats for the other groups:

Orange (Outside):

Orange (Inside):

Yellow (Outside):

Yellow (Inside):

Etc.

Then all of those groups are contained within one main group, to ensure they will still collapse if you were to add any elements on the left or right sides of the groups:

[sriram]

@fayewatson Thanks for your help here, Now thew group is collapsing, the issue was having two groups overlapping each other. I had them in line like you said and now it has started working fine.

Thanks again for your help!

[fayewatson]

@sriram Awesome! No problem at all!