🏆 HELP: Floating Group sidebar like Twitter (GIF included)

wesfrank · 2020-12-15T17:49:18.144Z

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

rijk-db · 2020-12-15T17:51:25.128Z

Pretty easy, just change “Vertically float relative to” to “Both”. Should work.

wesfrank · 2020-12-15T17:57:05.339Z

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)

rijk-db · 2020-12-15T18:20:24.947Z

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

wesfrank · 2020-12-15T22:09:31.357Z

No problem, thanks for offering a suggestion though!

wesfrank · 2020-12-16T16:15:13.736Z

What do you mean by “fake it”?

Thanks

boston85719 · 2020-12-16T16:52:42.212Z

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

Install the free classify plugin and add CSS to make a regular group behave as a floating group (requires some knowledge of CSS)
Install the paid plugin by BDK which is a floating group plugin to allow you to turn any element into a floating element.

Bubble

Floater (bdk) Plugin for Bubble

Floater (bdk) Plugin page on Bubble. Add Floater (bdk) in one click to your app. Bubble lets you build web apps without any code.

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.

wesfrank · 2020-12-17T17:33:12.383Z

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

duke.severn · 2020-12-17T19:22:02.582Z

wesfrank:

I know that it’s not possible with the current Bubble tools

@wesfrank No you don’t Never give up .

Floating group is stuck on left side of the screen Responsiveness

FLs are tough to deal with responsively because they have no concept of what’s going with other elements. If I have to, I usually link them to a page-level element (bumper). If you can make a bumper at the page level behave, you can id it “bump”, id your REU as fl_left and use this code: $(window).resize(function(){ s = $('#bump').parent().position(); $('#fl_left').css('left' , s.left + 'px'); }); Don’t forget to run the inside of the function on page load. Depending on your setup you mig…

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

boston85719 · 2020-12-18T05:19:14.606Z

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

Bubble

Bubble Editor - Blurimagesdirectly

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Thanks for this @duke.severn

duke.severn · 2020-12-18T15:17:32.829Z

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

wesfrank · 2020-12-18T16:31:35.104Z

@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:

Bubble

Bubble Editor - Testing912387182937

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Thanks

wesfrank · 2020-12-22T16:17:08.089Z

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