Remove scrollbar from Repeating groups

Repeating Groups Aug 25, 2020

If you're looking for a clean interface, you might have tried removing the scroll-bar of your Repeating groups.

Your first try would have been to make the Repeating groups as External vertically scrolling. And that is a great solution for most cases. If you'd like a better and a cleaner looking solution, you should use some CSS.

Setup

Install a free plugin called Classify. This plugin allows you to add CSS to your Bubble app and reference it to elements. Make sure that you have enabled the option in your settings to add an ID attribute. If you don't know if you've enabled it or not, go to Settings > General > General appearance. Check the Expose the option to add an ID attribute checkbox.

Double click the Repeating group and scroll down to the bottom to find an input for ID attribute. Paste this over there - myGroup{addClass: "scrollClass"}

Now add a HTML element on your page (from the Visual element section) and put this code in the element

Now hit preview and you won't have the scroll-bar.

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/testimonials

Editor - https://bubble.io/page?type=page&name=testimonials&id=nocodeassistant-tutorials&tab=tabs-1


If you need some help with your Bubble app or would like me to build one for you, send me an email at [email protected] Follow me on Twitter.

Tags