How to Remove Any Scroll Bar From a Repeating Group in Bubble.io
22nd of September, 2022
Throughout this guide, you’ll learn how to remove those ugly scroll bars from your Bubble repeating group in just a matter of minutes. This guide will highlight the exact step-by-step instructions you’ll need to follow.
The steps to remove any scroll bar from a repeating group in Bubble include:
When it comes to scroll bars, you can find these on pretty much every webpage that has ever existed since the dawn of time. They’re commonly found at the far right-hand side or bottom of a webpage. They allow you to move around the viewing area vertically or horizontally.
Now, Bubble automatically adds a scroll bar to all of your repeating groups by default. The purpose of these scroll bars is to display more data inside of a repeating group than what can fit in the initial space provided.
Thanks Bubble. This is great. However, sometimes we don’t want it.
If you wanted to remove a scroll bar from any repeating group, these are the simple steps you’ll need to follow:
Adding some custom CSS
By using some custom CSS code, it’s possible to easily remove any scroll bar. Now, I know I just said the word code, but don’t panic.
The purpose of this guide is to hold your hand throughout the process so we can do this together. All you’ll need to do is copy and paste. So let’s do this.
- Step one, go to ‘settings’ and then scroll down a bit. We’re going to check the option, ‘expose the option to add an ID attribute to HTML elements’.
- Now, if we go back to the design tab and open the property editor for any element on our page, you should have the ID attribute option right at the bottom here. We’re going to use this, so don’t skip this.
- Now, open the property editor for the repeating group that you want to hide the scroll bar for. In this case. Once you have your property editor open, scroll down to the ID attribute and give it a name. Any name. I’m going to call it ‘Test Attribute’.
- Now, we’re going to add a HTML element to your page. Anywhere on the page is fine as this won’t be visible to your end users.
- From here, we’re going to add in our custom CSS code. I have some code on my text editor here. I am going to copy and paste it into the HTML element. This code will be available for you to copy in the description of this video.
- Within the code, you’ll see the text, ‘replace me’. We want to replace that with the name that we put in the ID attribute of the repeating group. Remember, I put ‘Test Attribute’ in mine. Note: You’ll need to make sure it’s spelled exactly as it is within the ID attribute of the repeating group.
And that’s it! It’s time to open up a preview of your app and review your repeating group. As you’ll see, you now have a fully-functional repeating group with no scroll bar.