How can I set the page's background color?

I have a page with a height of 730 pixels and a dark gray background… On that page I have a button that opens a popup window which extends beyond the height of the page (it is populated by an RG, so it has dynamic height). The problem is that when the user scrolls down to the end of the popup, the background color goes from dark gray to white, because Bubble is only coloring the original page height. Is there some setting where I can set the default page background color so when the page expands, it colors the whole window?
Note the popup makes the “white” background look gray, but what I’m referring to is the color change in the background below

maybe your popup is extending to the bottom of the page?

Yea that is the problem. As I said above, the RG expands when the popup is shown to the user and it goes past the height of the page… I could increase the height of the page, but then the user can scroll down and see a blank page…

As I read the issue it seemed like the result was a popup that touches the bottom of the page. I’ve experienced this too and have spoken to Bubble engineers about what Bubble does behind the scenes for placement of popups on a page.

Below is the response from an engineer

As for popup positioning, our most genuine answer at this point is “the behavior is not well defined” in our current responsive engine.
Some rough guidelines that can help are:

  • popups are positioned ‘fixed’ if they fit the page so they don’t move, and ‘absolute’ if they don’t, so you can scroll easily
  • We have a few basic logic pieces to try to position popups vertically if they fit:
    • 20 pixels below the top of the viewport for mobile devices (pretty close to the top of the screen
    • 30 pixels if the popup’s height is between 0 and 100px shorter than the viewport
    • 50 pixels if the popup’s height is between 100 and 200px shorter than the viewport
    • 100 pixels otherwise
      As far as I can tell, there’s an extra vertical breakpoint, when the popup is within 10 pixels of overflowing (taking the base 20px offset into account) we switch to absolute positioning, so that the popup itself becomes scrollable.
      There are some extra considerations with the scrolling that mean that some elements below may not be fully covered by the grayout color, because this div may not be as tall as the popup itself.
      Finally this structure is relatively rigid at the moment, meaning that there may be a lot of unexpected deviations from these “rules” if the sizing changes on different hooks that Bubble didn’t expect (group “collapse when hidden” may exhibit some race conditions because of some timing constraints, page zoom, orientation changes, may work more or less well depending on devices).

I had asked about this because I don’t like how the bottom of my popup touches the bottom of the page. Having this insight helped me to come up with some ideas of how I could work with the situation and come up with some workarounds.

Hope it helps you come up with some for your situation.

2 Likes

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