Remove Scrollbar from Horizontal Repeating Group

Idea
43

Wow, this worked! Thank you!!

1 Like
44

Thanks for sharing that creativeness :stuck_out_tongue:

1 Like
45

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
46

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

2 Likes
47

Thanks a lot man!

1 Like
48

Glad you liked it :slight_smile:

49

You’re welcome😄

1 Like
50

brilliant solution!

1 Like
51

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.

53

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

54

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
55

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
56

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;
}

Capture d’écran 2022-07-24 à 21.52.03
Capture d’écran 2022-07-24 à 21.52.03920×1488 120 KB

Capture d’écran 2022-07-24 à 21.48.58
Capture d’écran 2022-07-24 à 21.48.58704×1182 88.3 KB

Any idea why it doesn’t work?

Thank you so much!

57

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

58

@bentoj72 having same issue did you figure it out?

59

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.

60

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:

61

It’s simple.

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

image
image1233×175 12.4 KB

  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)

image
image342×552 11.8 KB

  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