Horizontal scrolling - chunky scroll bars and sliders

Hi gang. I have a few stripes of content where I’m displaying a horizontal scrolling repeating group of Things. In this Bubble quick tip video - https://www.youtube.com/watch?v=J6mvea8B1Wk - their horizontal scroll bar is a nice, minimalist dark grey line:

I, on the other hand, have got chunky, ugly traditional scroll bars appearing:

Two questions:
1 - How do I make my scroll bars look more like the ones in the video?
2 - Any particularly effective tips or best practices on making a multi-card “slider” type group instead, where you have a left and right arrow/chevron on the sides and then you can just move through them one batch/click at a time? Something like what’s seen here:
slider example

Thanks in advance!

1.) Not positive, but seems like the scale/aspect ratio of the scroll bars is determined by the amount of content that’s being scrolled?

2.) Créate a group, and set the data type to whatever it is you’re displaying. Leave the source empty. In the layout tab select row for container type. Arrange the row for space between.

Add 2 buttons, and a repeating group inside the row. Adjust the layout so that things sit how you want them.

Set the repeating group for one row, and undefined columns, and you may have to select horizontal scroll.

Use a workflow to scroll the RG according to when the user clicks the buttons.


1 Like

@zach8 thanks for the helpful response! Getting there…

The only issue I ran into - and it’s not insignificant - is that the Element Action “Repeating Group > Scroll to Next” only seems to work when you have a fixed # of columns, which isn’t ideal from a responsive/mobile perspective. It says as much in the help documentation too, so I don’t think I’m doing it wrong. Any way around this unfortunate limitation? Thanks again!

Not sure honestly, and this one has causes me a decent amount of frustration in my app as well. But: Créate an additional RG that is not visible, and collapsed when invisible.

Populate your RG here, pagínate here, and then set your visible RG’s data source to that invisible RG. From there, play with workflows and conditionals to see what you can accomplish. Alternatively, you may get different results by creating a state on the invisible RG, creating workflows to update the state according ti whats displayed in each RG page, and setting your visible RG to display based on the state.