Floating group is stuck on left side of the screen

[jamesdaly]

Here’s what I’m wanting to do (finished app working on desktop view):

A sticky left navigation, similar to the new Twitter redesign. I’ve done this using a Floating Group.

However, as soon as I try and make this responsive (eg turn off Fixed Width for this page), all hell breaks loose, and the group is stuck to the left edge of the window.

I would fix this by grouping all elements on this page and adjusting from there, however a Floating Group can’t be grouped with anything else, so it’s kinda just off on its own, all lonely on the edge there.

I’ve watched all the tutorials I can find on Bubble responsiveness, but am still at a loss once a Floating Group/position: sticky is thrown into the mix.

How do I make this behave?

Link: Findyourbuilder | Bubble Editor

Thanks in advance!

[paritosh.mehta19]

I am not sure if this approach would work on a Reusable element, but I had managed to setup this on a page directly.

Here’s a post explaining my steps.

Horizontal alignment and responsive settings for floating groups

Hi @sridharan.s, Here you go. The settings I have done are as follows: Floating Group (2 screenshots - couldn’t take a complete screeshot due to the screen resolution): [FG1] [FG2] Then I have created a group inside the FG. Make note, that under the responsive tab, I have set the group as center alignment. [G1] You can then have any element in this group: Again have that center aligned. Hope this helps. In case you need anything more, let me know. Cheers, Paritosh

Hopefully that helps. Unfortunately, I have updated my app to not include this behaviour any more, so I don’t have a live link that I can share.

[duke.severn]

@jamesdaly

How do I make this behave?

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).

Bubble Editor - Duke-ssandbox

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 might have to use .closest() to find the first r-box.

[jamesdaly]

@duke.severn You genius!! This is EXACTLY what I’m looking for, THANK YOU!

Okay, I have almost everything set up, JavaScript is in, IDs are in, bumper is behaving, but still no action. Am I missing something in the function? I have a hunch there might have been a key missing word in your instructions at: “Don’t forget to run the inside of the function on page load.”

This is my setup: https://bubble.io/page?type=page&name=admin-controls&id=findyourbuilder&tab=tabs-1

I’d owe you if you had a free moment to check out what last step I’m missing Thank you!

[duke.severn]

The window.resize() goes in your html headers or html element inside <scrip> tags. The inside function to run on page load is just this:

s = $('#bump').parent().position();
$('#fl_left').css('left' , s.left + 'px')

See provided example: page load function, html A (I think).

[jamesdaly]

Perfect, that’s done it! THANK YOU! I can’t thank you enough for solving this so completely for me, you’ve saved me days of frustration. I owe you a drink if you’re ever in Sydney!

[duke.severn]

Glad I could help.