Make Scrollable elements actually scrollable in the Bubble Editor

Oftentimes, I would need to create a sort of scrollable elements on the web page. We would have a container which is height limited (a popup which would only span the height of the screen) and have the inner content scrollable. While this is already working in Bubble via the Allow vertical scrolling when content overflows attribute, it is only working in the actual app. The element in Bubble Editor is not actually scrollable. This make editing the application a bit of a nuisance.

There are two ways to make it works. I can either:

  • Create a reusable element of the content, and limit the height where it is used.
  • Add a custom style to the Bubble editor page, via customization tool like TamperMonkey.

The first solution is not really convenient, so I created a small script to inject an overflow style to the Bubble Editor. It works alright for now, so far haven’t broken anything on the Editor yet, but I would like to know if it would be possible to make this change on the Editor?

GIF of how it looks like with scrollable content in the editor.
ezgif.com-gif-maker

Hi there, do you mind teaching me how u set the overflow style?

Hey @yuliangtoh1995, sure thing. It is actually very simple but requires you to install a browser extension named Stylus (Chrome Link, Firefox Link). You should create a new stylesheet (checkout their guide for how to do this) for Bubble with the following code:

.bubble-r-container {
    overflow: auto !important;
}

Let me know how that goes.

Hi, I am still quite blur after seeing the guide.

You mind guiding me step by step?

Hi @yuliangtoh1995, I think a video is worth a thousand words. Here’s a guide on how I do it:

Hi,

Thanks alot for the video. Will give it a try soon.

If you dont mind, may I check with you… how do I make my page to be a full screen size? (inclusive of viewport)