Placing a floating group inside a group

Need help App Organization
1

Hi,

I thought it was not possible, but I managed to drag’n drop a floating group inside a group in my page.

It works well (it behaves as expected on my page) … but it triggers an error.
image

On the screenshot above you can see my FG being not at the page level. And you can see the errors triggered.

So… is the bug the fact that I was abble to put the FG there in the first place?
Or is the bug a false positive in the debugger?

Best

2

What do you mean ‘it works well’?

Is the FG behaving as expected?

1 Like
3

Yes, this is correct.

I am using those to place 2 blobs on my page, and have them behave with parallax and stuff, just for visual happiness.
Here they are visible to the right and left, green and blue blob.

And, it works well. The blobs are there, behaving just like expected.

image
image2315×1106 128 KB

4

Ah yes… I see what you mean, now…

I can’t answer that…

I’ve always understood that FGs cannot work (and don’t make any sense) inside other container elements… but then I’ve never used them in the way you’re using them… and clearly they ‘work’ (in a way) in that context.

Maybe contact Bubble and ask them what it’s all about.

1 Like
5

I am not sure about that. I think they should be more flexible and should be able to float relatively to something else than just the top or bottom of the entire page.

In my case I needed for it to float relatively to top of the hero section.

May I ask how would you have achieved the same floating behavior around the hero section (1 group in my tree structure) of a page?

Best

6

I’m not entirely sure I understand what that means…

In what sense can it ‘Float’ relative to the Hero Section (unless the Hero Section itself is already floating)?

7

Lets say this is my page. The page layout is column.

It is made of 4 groups, stacked. As showed on the screenshot below.

image
image2173×1373 247 KB

Bubble’s floating group can only float vertically and horizontaly relatively to “top”, “bottom”, “both” or “nothing” of the entire page.

But I need them to float around the section 2 of my page. I don’t want them all the way up to the top or at the bottom. These are not well controlable.

image

image

My question was, if we look at my page and the 4 groups visible on the screenshot above. How would you achieve to have a floating group float around the section 2 of the page ?

8

Instead of Floating Group, have you tried using Group Focus to see if thats tuneable to your needs?

9

My question was, if we look at my page and the 4 groups visible on the screenshot above. How would you achieve to have a floating group float around the section 2 of the page ?

Well you can do that in Bubble by just setting the top margins of your Floating Groups to match the correct position of the Hero Section…

But that might not be very consistent, if the content is dynamic, and/or with varying screen sizes.

So a much simpler, and more accurate method is just to use regular groups and make their position ‘fixed’ (which is all a floating group is anyway) with the following CSS:

.myFloatingGroups {
  position: fixed !important;
}

Where myFloatingGroups is the class ID of your Groups you want to ‘float’.

3 Likes