Forum Academy Marketplace Showcase Pricing Features

Remove Scrollbar from Horizontal Repeating Group

Wow, this worked! Thank you!!

1 Like

Thanks for sharing that creativeness :stuck_out_tongue:

1 Like

Hey guys! I took it a bit further and created a youtube video concerning this issue.

Feel free to check it out!

Cheers, Lukas

6 Likes

Thank you for posting this video. This was exactly what I needed.

2 Likes

Thanks a lot man!

1 Like

Glad you liked it :slight_smile:

You’re welcome😄

1 Like

brilliant solution!

1 Like

Any tips for other browsers? I sometimes use firefox and I know it is a growing browser, but it doesn’t seem to work on that platform.

I never used Firefox for development, maybe the best thing to do in that case is to use a plugin to customize the scroll bar, commenting from ignorance.

A very good one is “Sweet Scrollbar” by Yinka.

Or maybe the best thing to do is to switch to a browser like Brave, just an opinion

Check out this free tutorial. The code used should work for all browsers and definitely does for fire fox. It also covers how to restrict the overall height of the RG in order to optimize your RG design and loading.

2 Likes

Hey David!
Did you get a chance to try the updated code from the video description?
Now it should work for all browsers.

Cheers, Luke

2 Likes

Hi,

I’m struggling to hide the scrollbars of RG or the page with every code I found here:

Wether it’s in the head code of the page or with a html, it doesn’t work in both cases:

Html page:
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar { width: 0px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #D62929; }

Or in a HTML pixel :
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
{
-ms-overflow-style: none; /* IE and Edge /
scrollbar-width: none; /
Firefox */
}
::-webkit-scrollbar-thumb {
background: transparent;
border: 0px none;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: transparent;
}
::-webkit-scrollbar-thumb:active {
background: transparent;
}
::-webkit-scrollbar-track {
background: transparent;
border: 0px none;
border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
background: transparent;
}
::-webkit-scrollbar-track:active {
background: transparent;
}
::-webkit-scrollbar-corner {
background: transparent;
}


Any idea why it doesn’t work?

Thank you so much!

most of this kind of UI related solution are not working in new bubble engine. :frowning: anyone know how to downgrade bubble engine?

@bentoj72 having same issue did you figure it out?

Im having the same issue, every single piece of code or workaround in this thread doesn’t seem to work for a horizontal scrolling bar.

I would also love a solution to hiding the horizontal scrollbar; especially if we can get one that will work cleanly for mobile purposes :slight_smile:

It’s simple.

  1. Enable Settings > General > Expose the option to add an ID attribute to HTML elements

  1. Edit the new property ID Attribute at the RG element wich you want to hide the scrollbar and give it an ID (e.g rg1)

  1. Add an HTML element to the page

image

4 . Paste the code below at the added HTML element and change the expression RGID by the IDAttribute you filled at RG element.

#RGID::-webkit-scrollbar { display: none; } #RGID{ -ms-overflow-style: none; scrollbar-width: none; }

image

Thats it, Good luck!

1 Like