Help with Overlapping 'Floating Group' and 'Group' Elements in Bubble

hcamurdan1 · 2025-02-03T17:04:05.542Z

I’m currently working on a project in Bubble, and I’m trying to keep a part of the page static, even when the user scrolls down. However, when I try to add another ‘Group’ element next to a ‘Floating Group,’ they overlap. From what I understand, you can’t make a ‘Floating Group’ a child of another ‘Group’ element. I think the problem is related to the layout of the page since the ‘Floating Group’ can only be a child element of the page. I set the page layout to Row and the container alignment to ‘space between,’ but the issue wasn’t resolved. I then tried other layout options on the page, but none of them solved the problem, or maybe I missed something. Can anyone help clarify or correct my approach?

geesonofgee · 2025-02-03T17:15:38.335Z

I don’t know if I get to you correctly but using floating group should serve… But if you don’t want overlapping, you have to make the page layout row, then you insert the static group there and the the other part will take in other page contents…
The static half will be like a side bar sort of and will stretch vertically, don’t know if you understand my point

JuanMejia · 2025-02-03T17:28:02.944Z

Hey @hcamurdan1,

Make sure to select “Above elements” in the appearance tab of your floating group.

image340×410 8.18 KB

The layout of your page shouldn’t have any influence in the way your FG is displayed

hcamurdan1 · 2025-02-03T17:28:19.123Z

Thank you for your response
"The static half will be like a side bar sort of and will stretch vertically, don’t know if you understand my point"thats what iam trying to achieve"other part will take in other page contents…"I expected it to work like that too but instead it overlaps and what i mean overlaps is they look like they are on top of each other.

hcamurdan1 · 2025-02-03T17:29:06.074Z

It is selected as above elements but problem still persists.I think iam missing something.Thank you for your response as well.

JuanMejia · 2025-02-03T17:31:12.708Z

Could you please add a screenshot of how your page layout looks like?

hcamurdan1 · 2025-02-03T17:35:01.554Z

MyChatBot _ Bubble Editor - Google Chrome 2_3_2025 8_34_04 PM1920×1080 116 KB

hcamurdan1 · 2025-02-03T17:36:41.886Z

Myss21920×1080 144 KB

forgot to highlight overlapping group in my initial image,i apologise

JuanMejia · 2025-02-03T17:56:23.785Z

Overlapping should only happen in the editor, not when previewing. Can you check please?

hcamurdan1 · 2025-02-03T18:05:02.718Z

Is that so?I did not know that.So i should keep building my app ingoring this overlap?I thought it was a serious issue.

JuanMejia · 2025-02-03T20:57:35.039Z

That’s it, you should be good to go

hcamurdan1 · 2025-02-04T08:59:48.484Z

I still cannot wrap my head around,it should not overlap in editor if it wont overlap in preview i think.Thank you.

gloriaui · 2025-02-04T12:13:55.668Z

Does your floating group have a width or max-width defined?
To prevent group A from overlapping, you should define a left margin for it, the same size as the floating group.

Ex:
Floating group with: width ou max-width 250px
Group A with: left margin 250px

system · 2025-04-14T17:04:46.330Z

This topic was automatically closed after 70 days. New replies are no longer allowed.