Repeating group side bar

Please can someone tell be how to remove this ugly side bar (I still need to scroll)

Search scrollbar for the RG settings or css to remove the scrollbar

Check this CSS from Matthew:

@elismith456 you can use this CSS. You can also alter it if you want to make a scrollbar look the way you want it to look. This CSS will work for vertical and horizontal.

I usually put it into the Settings Script in Body on the SEO/Metatags section.

Just remember to give the RG or groups the ID attribute to make it all work properly

<style type="text/css">
#rg1::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
#rg1::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
#rg1::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#rg1::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
#rg1::-webkit-scrollbar-thumb:active {
  background: transparent;
}
#rg1::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#rg1::-webkit-scrollbar-track:hover {
  background: transparent;
}
#rg1::-webkit-scrollbar-track:active {
  background: transparent;
}
#rg1::-webkit-scrollbar-corner {
  background: transparent;
}

/* Thin Scrollbar */
#rg1{
  scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
  scrollbar-width: none !important;
}
</style>

In the CSS above the ID is rg1

Would I put ‘-webkit-scrollbar’ into the ID attribute of the rg?

no just rg1 is the ID you would need to add

The webkit portion is to make sure everything also works on Firefox browsers

and then place all that code into the SEO setting ‘script in the body’?


Just put it on the page HTML, not the SEO settings. You only want it to apply for one page, not every page.

It does not work still have the slide bar

Show us where you put the code

@elismith456 @georgecollier is correct if the below is true

If you only want to apply it to one repeating group or group on one page

If you want to have it available to use on any page on any repeating group or any group.

Usually in my apps I want consistency in design, which for me would be no scroll bars or the same scrollbar design across all repeating groups and groups that can scroll to accommodate overflow.

Yes, unless you only want to use it for one single page in the app, then you can add an HTML element to the page. Just make sure if you are putting it into an HTML element on the page, you put the HTML element into a floating group that you set to float beneath the page so that the HTML element doesn’t interfere with your responsive design at all.

Show what the bottom part of the code you entered into the settings to verify you have closed the code.

I think its not working because its a free plan is there any way possible to make this work with the free plan? @boston85719

Shouldn’t make a difference if it is free plan or not

well its not working at all

If you show this as requested it might help shed some light on what you might have done wrong.

Also share the element and the ID you added to it.


Looks like it is setup properly. If it is not working for you, likely it is because the scroll bar is on a regular group that you have placed the RG into as a parent container.