Forum Documentation Showcase Pricing Learn more

Can I make a Floating Group switch from being anchored to Top to the Bottom?

Hey all, I have a question about floating groups. I’m trying to mirror the functionality of www.slack.com. Here’s what it looks like it’s doing:

  • The Big text, footer, and email signup are in a Floating Group that’s anchored to the bottom of the page.
  • As the browser gets taller, the floating group stays anchored to the bottom
  • As the browser gets shorter, the floating group stays anchored to the bottom of the window until the top of the group hits the top of the window
  • When the top of the floating group hits the top of the browser window, the Floating Group now behaves like it’s anchored to the top of the page, until the browser height gets taller.

In Bubble, when I try to emulate this, I get the floating group anchoring to the bottom just fine, but as the browser gets shorter, the floating group extends off the top of the window. How might I fix this? Here’s the page in question so you can see the behavior that’s happening: https://enscope.bubbleapps.io/version-test/new-index

Make sure the floating group is close to the edge of the bottom of the page. That’s how we know where to put it on the screen.

See this

It’s working great for most cases. Here’s a video that shows the undesired behavior: https://drive.google.com/file/d/0B2IvmomCX6qZQVNUMGZYLVlIc3c/view?usp=sharing

In the Slack example, the floating group does not extend off the top. In my example, it just keeps on going. I could solve this problem if I had the ability to detect the Height of the users browser Window. If their browser window was shorter than X pixels, I would hide this group and show a different one.

2 Likes