How to disable Scrollbar from repeating groups

Need help App Organization
1

How do we disable/hide the scroll bar from the repeating groups for all browsers

2

Is it possible to disable it in the Hobby plan?

3

Hey @syedammar07,

Welcome to the Bubble community! You can use “External Vertical Scrolling” in your repeating group and it works on the free plan.

Alternatively, you can use some CSS to remove it

4

This is the detailed procedure to disable the scroll bar of Repeating Groups in Vertical Scroll mode.

  1. Add a HTML Element as shown below.

    image
    image394Ă—565 15.3 KB

  2. Add the following CSS section.

    /* Hide scrollbar for Chrome, Safari and Opera */ ::-webkit-scrollbar { display: none; } body{ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }

Note: For firefox browser “scrollbar-width: none;” dosent seem to work. This could an issue with bubble apps in Firefox. Not 100% sure about that.

In order to remove the scrollbar from Firefox, we need to hide the scrollbar element. The solution is provided in this thread discussion mentioned below.

3 Likes
5

Be carefule with this portion

/* Thin Scrollbar */
:root{
  scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
  scrollbar-width: thin !important;
}

If you have an overlay on the page you want the rgba to match that overlay because the scrollbar is not removed, it just has no color so your page will show 15px without the same color as the overlay

1 Like
6

Yes, I had observed this behavior.

Thanks a lot for the making it clear and providing a possible workaround