šŸ† HELP: Floating Group sidebar like Twitter (GIF included)

This has been a 6+ hour, incredibly frustrating situation.

I’m trying to make a simple sidebar dashboard like Twitter in where it floats on the screen but sticks to a scrolling group in the middle. Please see the video below and keep an eye on the two sidebars as I zoom out and in.

ezgif-1-8df4ec2cefcb

This is what I’ve tried and what DOESN’T work (along with the reason why it doesn’t work):

  • A Floating Group on the left and right side (Floating Groups stick to the edges of the screen and do not stick to the middle)
  • One large Floating Group that stretches across the screen and then having fixed-width groups inside as the sidebars (you can’t click elements underneath a transparent Floating Group which makes the middle group unusable)
    *A ā€œbeneath the pageā€ Floating Group and then have the main page transparent (you can’t click elements in a Floating Group beneath the page even though the full page is transparent)
  • A Group Focus attached to the header (the Group Focus closes whenever you click anywhere on the page)
  • Float relative too Plugins (It glitches, groups don’t appear, etc.)

This would all be solved if transparent Floating Groups behaved like transparent regular Groups. But there must be a reason why you can’t through Floating groups?

Any ideas on how to achieve this?

Thank you

Pretty easy, just change ā€œVertically float relative toā€ to ā€œBothā€. Should work.

It doesn’t- having it float vertically is not the issue. It’s having it stick to a proper horizontal reference (having it stick to the middle column like in the GIF)

Ahhh, okay. Well, no idea how to help you there. If I recall correctly, I’ve tried that before, but failed.

No problem, thanks for offering a suggestion though!

1 Like

What do you mean by ā€œfake itā€?

Thanks :slight_smile:

A couple different things you could do that I can think of…

  1. Install the free classify plugin and add CSS to make a regular group behave as a floating group (requires some knowledge of CSS)

  2. Install the paid plugin by BDK which is a floating group plugin to allow you to turn any element into a floating element.

The reason you are having a hard time with this setup as you are trying it, is because it is impossible (at least from my frustrating weeks spent trying to do similar) with a floating group element provided by Bubble because that floating element is ā€˜connected’ to the page and is not capable of being contained by other elements except the page and therefore can not be ā€˜connected’ to other elements on your page.

Thanks so much for the direction @boston85719 - I was hoping this could be achieved without a plugin but oh well.

At least I know that it’s not possible with the current Bubble tools. This will stop my long manhunt into a solution! haha

@wesfrank No you don’t :wink: Never give up :sweat: :mechanical_arm: :muscle:.

Just put the ā€œbumpā€ group off the left or inside another master. Try a few times and if it still doesn’t work I’ll make you a tutorial :slight_smile:

Does this allow to use a floating group on the right side of the screen or position anywhere on page without overlapping other elements?

This would be great to add a floating group to the right of the screen and ā€˜bump’ it from the right margin. I took a look at the editor in the linked post…the right side short group would be great to float and I personally tried to find a way to do something like that without a plugin.

Would this method work to do that?

Edit

Just had a play around, and it seems like it does

Thanks for this @duke.severn

1 Like

Indeed, you can readjust it to any element on resize, regardless of where that element is :slight_smile:

@duke.severn So I did come across your solution during my research but ignored it because the preview didn’t quite do what I needed. The floating groups on the sides still stuck relative to the sides on zoom out. Bumping the floating group from the edges isn’t an issue though overlapping elements is - this solution moves us one step closer.

I need it to stick relative to the center group. Can you tell me what each editable part of your code snippet does and where I can change it to possibly make it work? I’ve tried a few things but still no luck. (I’m not a programmer but can usually hash things out)

Here’s the editor:

Thanks :slight_smile:

Just going to bump this one more time before I move on