I’m trying to use a Horizontal Scrolling Repeating Group as a navigation tool on a mobile page – tabs, basically. Tab 1, Tab 2, etc.
I’m using the RG to make it scrollable, to make up for the limited screen space. However, there’s the annoying scrollbar ruining my mojo.
Is there an easy way to get rid of the scrollbar? Not on the whole page, just for the RG element.
I bet someone will chime in about this but I’ve seen more than a few mentions of some simple JS/CSS to inject into your page to remove that scrollbar. The results probably vary by browser, but do a bit of searching in the forum — I know there’s at least a couple of suggest solutions for this.
Hmm, ok, I did some searching, but probably gave up too quickly. I’ll have another look, thanks.
Hint: I believe the solution involves the “overflow” property. You might also just Google “remove scrollbar from element” to find discussions of various approaches to this. At a minimum, you are going to have to enable “add ID attribute to HTML elements” so you’ll be able to reference a specific element in your page (find that under Settings > General.
I feel that this is common enough that it’s worth us nudging the bubble team to add this as a setting for repeating groups in the editor instead of relying on a plugin or other workaround. (At least, some greater ability to customize the scroll bar appearance…ex. changing the color).
True this. Mostly, I see people just wanting to get rid of it.
Aside: As I think about it, I don’t use horizontal scroll RG’s at all due to the generally fugly appearance. Instead, I use fixed cell groups and build next/previous widgets to rotate them. Of course, that approach makes the group non-swipeable.
So yeah, that would be a really good change! 
Hi Guys,
Was a solution found to this?
Hey guys, if your lists / repeating groups have a fewish items and you can afford to show the whole list at once, then selecting Layout Style > Full List on the repeating group should get rid of your scroll bars. It did for my vertical ones anyhow.
Either way, it would be nice to have a “hide scroll bar” toggle in the RG
Hey guys. I have a case I use for that. Just add an ID attribute and change it to match the CSS selector below
#rg-top-menu{
overflow-x: hidden !important;
}
Just add the CSS above to the page header while wrapping it in
Hi Ali
Would this be possible to put into an html element on the page? If so could you show a screen shot of what the setup would look like?
I’ve tried to add this to an html element and haven’t had any success, much attributed to my complete lack of programming language.
Cheers
1 simple hack is:
Put a thin shape in front of the repeating group where the scroll bar appears, make it the same colour as whatever colour is behind the scroll bar, and you won’t be able to see it.
I have put together a public editor to showcase a few ideas I came up with after hours scouring the forum and internet.
Hope it helps and that others could contribute to things not covered.
Hi Ali
I’m sorry but I’m really new to Bubble, I’ve created an ID for the repeating group but where can I put the CSS override code? I don’t see anywhere obvious to put CSS style on the page
Appreciate any help
Mike
Add it to page header just remember to add the CSS between the style tags
#rg-top-menu{ overflow-x: hidden !important; }Thanks Ali, sorry for being thick but where do you actually enter this, I understand CSS and what that means, I just don’t know Bubble well enough yet to see where it goes
I tried this:
Really appreciate your help
Thats is the place where you could add css yes.
Thank you for taking the time to help guys. Doesn’t seem to be working though…
(I updated the ID in my CSS above to match)
If I manually change the value in Chrome Inspector tools it is perfect and the scroll bar I don’t want disappears. But the CSS in the Bubble editor doesn’t seem to be being applied
Hi. Overflow x : scroll acually means to show it. Overflow x : hidden will hide it.
Sorry, I think I just understood your issue. So you have added the CSS to the header however the CSS is not being applied correct?
