Solution to remove scroll bar from Repeating Group on all browsers

Tips
1

Hi guys,

I come here with a CSS tip to remove a scroll bar in all browsers (IE, Safari, Chrome, Edge, Firefox). Few comments and posts referring to this topic basically did not include all browsers or were too complex CSS code / with plugin.

There is a way easier setup. Just copy paste this CSS code below into your SEO/metatag header so that this CSS is applicable to all your RGs of your app. Then simply name your ID attribute at the bottom of your RG editor with the name “noscroll bar” (don’t include the “” of course). Indeed noscrollbar is what we refer the ID attribute in our CSS code (#noscrollbar). Then that’s it, your RGs with this ID attribute will not have the scrollbar. No need to write longer code, or add a useless plugin.

You can also have this CSS into an HTML element that you put in your page 1x1px at a corner for instance, in case you just have a very specific need for one single RG. But putting this into the header will work fine, especially when you have multiple RGs in your app.

11 Likes
2

I put colored shape of that part of the RG :slight_smile:

1 Like
3

Hey Guys!

Here’s a quick video I made explaining the scrollbar issue.
Feel free to check it out :smile:

Cheers, Luke

9 Likes
4

Yes Lukas but your code is way to long for this purpose. Good that you make videos, but still the idea is to have the most direct route! cheers

2 Likes
5

Save my day !!! Tks

6

This only works with horizontal scroll bars not Vertical

7

thanks @lukas.eggenberger54 !

8

Really nice topic!

9

does this solution still work? I copy and pasted the code snippet into an HTML element on my page and assigned “noscrollbar” (no “”) to the repeating group and the scroll bar is still showing up.

10

works fine on my end, make sure it isn’t a group or other element causing the scroll.

11 
<style type="text/css">
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-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;
}
</style>

this is working well for me

3 Likes
13

This works, but i guess it will remove all scrollbars, as there is no id attached

14

The solutions mentioned by @lukas.eggenberger54 and @daviddr17 work well for desktop, but for some reason don’t work on mobile (tested in Safari and Chrome).

Could this be a an issue with Bubble’s responsive engine?

15

I guess its not possible to have no scrollbar on some mobile devices. I tried a lot of things but it seems that there is also a native scrollbar on ios. However, I can not say that this statement is 100% correct