How to add vertical scrollbar for content


It sounds silly, but I couldn’t find a way to make a box in which content scrolls when content size increases.

Right now as the content increases height of the container increases. There is a setting for “fixed width” and a setting for “cut off content if content is too tall”, but there is nothing that I see for “fixed height” or “add scroll bar”.

I searched forum but don’t see a relevant topic. There is nothing in reference manual either.

Please guide.


Hey there! :wave:

Without looking at your project, it’s sort of hard to tell.

The scroll bar should come up automatically when it’s needed. If you are looking for a repeating group, that will be data that can be displayed in a list and will most likely show a scroll bar.

If you can share a screenshot that might be helpful.

Want to learn more?


Hope that helps! :blush:

Sure. Here’s the link where you can see it: Your Bubble app

Here’s the screenshot of the editor. You can see that text is in a group and both text and the group are of quite small height, but since text is a lot, when it renders the text box and group both are getting their height increased to fit the content.

Not sure if this was what you were going for but here is an example for you:



All I did was use an HTML element and make sure iFrame was checked.

Hope that helps! :blush:


Interesting. But two comments here.

  1. I might not have a simple HTML element. I may have a complex object which has some image, some data coming from some other source etc. And I would want to avoid doing html coding for those things (after all we are using Bubble to avoid all that, right?). Then what do we do?

  2. IFrames are not SEO friendly as far as I remember, so I would like to avoid iframes.

Any other solution? This is more of a hack, right? Does Bubble not have an official way of adding a scrollbar to an element?

I can’t think of a different way at the moment to do what you are trying to accomplish. Bubble will automatically add a scrollbar if something goes off the page.

Maybe you might need to rethink your design a little bit to get it to work. Can you show me a different example, maybe with real data, so I can see what you mean?

What I showed you was a real example, right? Just add some more boxes around it, and it can be a page which has a box which I want to be of fixed height for whatever reasons.

It may be ugly, but may be required in some case.

Right now I needed it to be in a pop-up. The pop-up has a text box and a button. I want to limit the height of the pop-up and the text box, because I want users to see the button even without having to scroll down. By default Bubble is increasing the height of box and the pop-up.

Now I have done what you told i.e. creating an html element. But it is hack and I am having to do formatting in HTML. I am surprised that Bubble doesn’t provide a no-code way to do such a simple thing. But thanks to you I at least have a solution.

Not sure why you are not accepting that there is no right solution to it. I gave a real life example, and use-case of pop-up I mentioned above is real life too. You have told couple of times that Bubble would add scroller when I need. I need it here and I don’t see a scroller.

I’m glad at least there is some sort of solution. :+1: Sometimes when developing we have something in mind that we want to do, but it doesn’t really work. We may need to think outside of the box or change our design to fit what the software can do. Maybe you can send Bubble a feature request to have this added. I remember when I was first learning Bubble that I was looking for the same thing.

Hope you can still build what you are imagining! :blush:

Hey @J805 I have a similar need again, and like I told last time, this time my element is much complex, unlike last time where it was simple text.

So I have a reusable element which has map and some other repeating group etc. I want to show this reusable element in a pop-up at some places. However, this reusable element is bigger than the height and width of pop-up.

At those places I want user to be able to scroll within the pop-up to access different parts of reusable element.

Unlike what you said, Bubble is not adding scroller automatically. How to make it work?

Hey there :wave:

I know sometimes things don’t make sense but there are ways to make it work normally. There are probably a few different ways of doing this.

Just one way I was thinking of making this work is to make sure you don’t resize the reusable element when you put it in the popup. The popup should be as long as you need it to be. Then you can scroll the popup on the screen. Popups can be very long, Bubble will let you scroll through it no matter the length of it. I suggest not cutting the popup off to fit your screen, just let it be long.

Does that make sense?

Hope that helps! :blush:


For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes

:+1: Works fine in this use-case of mine :slight_smile:

What if I wanted the pop-up to be fixed height but have reusable element scroll within that?

The only element that really does that without coding is the HTML element. Then it can scroll within the box size if you don’t let it expand to fit content. :man_shrugging:t2:

Thank you for the help, Jason.

1 Like

Happy to help. :blush: