Forum Academy Marketplace Showcase Pricing Features

Page Scrolls when Popup is Open

I thought Bubble had put out a fix to this a while back and made it so the page will remain in a fixed position when a popup is open and not allow the page to scroll…is that not the case?

Hey Boston!

You got me curious, so I went and checked it out! Interesting! For me, When a popup is open, nothing scrolls! It works well for me!

Is the page still scrolling for you?

Maybe you have a bug! It happens from time to time.

Just make a new page and try it…
Then make a new app and try it…

For me Bubble mean constant tinkering to check and confirm what I believe… to make sure I know how everything works. Most of the time it’s my fault!

Peace!

Ashley

I think it is more associated with the function of the popup to have elements hidden on the popup which means the height is dynamic and when that height changes Bubble seems to re-render things and that causes the page position to change.

So it is not really the idea that a user can scroll the page, but mostly that the page itself scrolls down automatically when adjusting the height of the popup.

1 Like

Hey there,

You’ve got me curious so…

I replicated a pop up with a space collapsing group controlled by a ‘hide’ and a ‘show’ button all on the popup.

When I hide and show the group, the space collapses and shrinks the height of the popup group accordingly.

However, the shadowed out page beneath does not move. It’s pixel steady.

Sorry I couldn’t replicate your issue!

I see no problem there!

If your app is huge and complex, sometimes there are funky things that happen. So once again, go test it for yourself and lay that quandry to bed my friend!

Sincerely,

Ashley

Thanks for checking that out.

This is what I am experiencing.

The workflow is setup to scroll to the top of the popup element when the user clicks the next button. When I remove that action the page no longer moves…I think this is based on how Bubble renders the top margin of a popup as it is a dynamic setting.

I had in the past contacted support about the fact that a dynamic height popup at times has no bottom margin and touches the bottom of the page and the engineer responded with a detailed explanation of how the margins are rendered for a popup and unfortunately they don’t ensure that it is always centered (which I am not sure is even possible) to keep an even margin for top and bottom.

In the end on this, not scrolling to the top of the popup element itself is making it so the page no longer moves.

Oh, are you wanting to potentially keep the popup vertically centered? (Yes, that is possible) And then keep it centered as it is changing heights due to the changes in hidden and exposed elements in your pop up?

Yup that should all be doable!

Use the CSS tools plugin to grab the vertical height.
Use something that you can move and change the height of (like a draggable group… see plugin)

Then when you click on next, you need to do some calculations…
How tall is my user’s screen?
How tall is my target popup height?
How much do I need to shift the pop up? (I imagine you want to move the popup and keep the background website still amirite?

Let me know if that’s what your goal is!

Not in this situation. Just wanted the page to stop moving. I got it sorted. Thanks for the input.

Onward and upward my friend!

Ashley

This topic was automatically closed after 14 days. New replies are no longer allowed.