Bubble Horizontal Scroll Create Beautiful Repeating Groups - Bubble.io Tutorial

[@ernandesjunior1928]

Great tutorial , congrats from Brasil.

[@romainmaltrud]

Great tutorial, thanks ! I found your video while looking for a solution i've been struggling with for a little while. When you create such a horizontal scrolling repeating group, is there a solution de conceptualize a esthetical horizontal scrolling bar ? Like for instance the progress bar on youtube's videos player, with a dot that you can slide left/right and the repeating group slide left/right accordingly ? Though one I guess...

[@NoCodeAcademy]

Hi thanks for the comment and kind words. I hear what you're saying. The challenge is that while it's an elegant and cool feature you're describing, it's very specific. And the challenge with very specific things is that they must be built in first in code by someone to work in the world of no code. And if no one has come from the coding world has provided that gift to the rest of us no coders (which is what the plugin store on Bubble basically is), it's not something that is available to us.

[@2strokeorchoke496]

Im learning bubble to create an app and would like my data in excel structured form. Can you tell me what I would look up to make a data structure like you have in "app data" at 0:29?

[@NoCodeAcademy]

Hey good question - the Title, Bundle Number, Category, Description, etc you see as columns across the view in 0:29 are all fields that are added to the YogaClass data type under the "Data Types" tab. Then of course you need actual entries of individual yoga class records in the database for anything to display in a table like this. You also may need to edit via the pencil icon next to All Yoga Classes to get the exact columns/fields you want to display. Doing all the above would get you a view of data shown in 0:29. Hope that helps.

[@GordanS]

Great tutorial !😊

[@NoCodeAcademy]

Thank you, that means a lot!

[@lafevre1636]

Hi thanks for the tutorial but I have a quick question, I have been able to hide and remove the scroll bar however my repeating group is not responsive to my mouse's scroll wheel and is now stuck in position without the scroll bar underneath. How do I remedy this?

[@NoCodeAcademy]

Hey good question, you may consider only removing the scroll bar on mobile/tablet devices under the 768px width so it's still available to devices with a mouse. To do so, feed the original code for the scroll bar into chatgpt and ask it to make it apply only to screen widths under 768. Good luck.

[@thedillonsmith]

How would you make each card clickable and go to external URL?

[@NoCodeAcademy]

Hey Dillon, good question - for an external website, when the photo is clicked on I'd run a workflow like shown in this video kzbin.info/www/bejne/o5fLhWSfh56bqJIm4s. Install the toolbox plugin to run that "Run Javascript" workflow.

[@simon.stjohn]

Just interested....Why don't you uncheck both min rows and min column and use the Scroll Direction - Horizontal method?

[@NoCodeAcademy]

Hey Simon thanks for the question. The scroll direction is a newer option for repeating groups. Frankly, my learning new things in Bubble these days comes from new project opportunities and just so happens I haven't had one yet with a single-row side scrolling layout like this to try something new. Have you found much luck with achieving a single row using those settings? When I switch it, I see a 2x2 matrix of the 4 cards presented in the tutorial. Could be something worth exploring in the future.

[@simon.stjohn]

@@NoCodeAcademy yes ! I found the same...I could not make it work so I just followed your method instead....Should really report it to Bubble bit O don't really find their Support that supportive 🤓

[@josephharris7142]

is it possible to get a copy of your database

[@NoCodeAcademy]

Hi Joseph, check kzbin.info/www/bejne/a6qtl55jgr2oa5Y as it shares how to build out a database that's very similar. If you follow it step by step, you'll end up with something like what you see in the video here. Reach out to me on nocodeacademy.co if you still need help.

[@MoundirRohmat]

There is a way to refresh (reset) a RG without loading the page ?

[@NoCodeAcademy]

Hi Moundir good question - without knowing your specific use case, here is one idea. Have a custom state with yes/no values, and when it changes from no to yes, for example, you can set a conditional on the repeating group that updates the data source. You'll just need to figure out under what conditions/actions/button pressed happen to change the state's value.

[@MoundirRohmat]

@@NoCodeAcademy thanks for the hint. I tried it out but didn't work for me. Actually, I call the RG for a list of users where I set the sorting as random. Once the list is completely displayed, by clicking a on a button I want to display the same list but with a new random sorting. When I do a display data the random sorting still the same.

[@NoCodeAcademy]

@@MoundirRohmat yea Bubble does random sorting the exact same when you start a list with a given order and then run the random sorting on it... this is not an exact fix directly applicable to your situation, but it might spur some ideas with this 'pick random item from a hat' operation that you would use to build a custom state that is a list of things using the "add" operation one at at time.... not the most elegant and not the solution I'd suggest, but I'm sharing it because maybe the ideas here will unlock some creativity to get around your current obstacle, good luck kzbin.info/www/bejne/eqCzh6J3armbhqs

[@MoundirRohmat]

@@NoCodeAcademy Thanks for your answer, really appreciate you take time to do it. I figured out a solution based on what you suggested. Cheers !