Floating element

Need help Mobile
1

Hey guys,

I am trying to make a floating element that will stick to the viewer’s screen, while it scrolls.
On desktop it works fine, but on both iOS and Android it has some odd behavior:

  1. iOS it just sticks to the bottom, like a rock in a pool.
  2. Android it allows scrolling, but it also sticks to the bottom.

This is the code that I use in the main element of the page, in HTML header:

   <div id="floating" class="bubble-element FloatingGroup floating-group" style="position: fixed; z-index: 1514; height: auto; bottom: 70px; right: 50px; background-color: rgba(255, 255, 255, 0.95); border-radius: 10px; box-shadow: rgba(52, 50, 92, 0.27) 4px 16px 30px 0px; box-sizing: border-box;">
<center style="padding: 15px 15px 5px; font-family: Roboto;">Book now!<br/>Get the app from</center>
  <center><a href="#"><img style="width: 100%; max-width: 150px; padding: 15px 15px 5px;" src="https://d1x3cbuht6sy0f.cloudfront.net/assets/images/about_app/Apple-Store-Button-UK.png"/></a></center>
  <center><a href="#"><img  style="width: 100%; max-width: 150px; padding: 5px 15px 15px;" src="http://algorithm.wiki/en/app/assets/images/button/button_download_android.png"/></a></center>
</div>

Any idea why is this happening and how to fix it?

1 Like
2

Why not put it in a float group ?

3

great questions haha.
I saw it on zerocode’s template and I thought that they did it this way as the best solution. For them it was good so they can edit the content remotely.
Good point! :slight_smile: I will try it now.

4

I think your seeing bubbly code here … it’s a floating group which can be anything. Don’t need to hack

5

okay done the floating group. Now how to make it stick to a position whle the page scrolls behind it?
L.E. I am already using a big group where I have all the other elements.
And as I researched now, floating groups won’t work inside other groups. :frowning:

6

I’m not following you… always post a link to you app if you want help …

Float group is covered in the bubble docs https://bubble.io/reference#Elements.FloatingGroup.floating_reference or search the forum

7

Hey,
Did you use a different page size in bubble for Android?
I’m using 380 x 676 with a floating group for a row of buttons across the bottom and it works great for native on iOS.

In the Android emulator this page size seems to tall and for some reason the floating group doesn’t seem to work when running a Nexus 5 API 24 (1080 x 1920 resolution).

However, the page looks fine in the emulator when running a Pixel API 25 (1080 x 1920 resolution).

Has anyone else had similar issues? I’d like to avoid creating a completely new page for android if possible.

Thanks,
Nathan