Forum Academy Marketplace Showcase Pricing Features

How to make a scroll button?

I need to create a scroll button. When the user clicks it the repeating group scrolls by 1 cell. How can I achieve this? When I choose only the repeating group, I get into a loop until I choose an option like last item or item #. Any help is appreciated!

maybe use a custom state on the RG that holds a number that the buttons change the value of. then that is your reference for the RG search.

Can I do it with a yes/no type? I tried it and it is still getting me into a loop. Can you make an example or do you want the editor link?

it is showing me this. I can’t change the type of post into a single file.

Hey I am also looking for the same solution.
Were you able to find the solution?

Hello.
Unfortunately, no.

This is pretty easy to achieve actually.

  1. Create a custom state (on the repeating group if you like), let’s call it “Index” and make it type “number”
  2. Create a button with the following workflow
    Step 1. Set state > with Value RepeatingGroup’s index +1
    Step 2. Scroll to entry, element: Your repeatingGroup.
    Entry to scroll to: RepeatingGroup’s List of Datatype:item#RepeatingGroups’s index.

You can easily build on this, with disabling the button when you reach the last entry and so on.
If you want to go in the reverse, you do the same thing but with (Custom State)index -1

1 Like

Hello @casheets123. Thanks for posting your solution to this but there are some problems that comes with it.

  1. When the page loads the first time you need to click two times to get it to work.
  2. In order to use this, the repeating group’s layout style needs to be horizontally scrolling. When I click on the next button and the state’s value is for example 2: if I use the scrollbar and the RG item# is 5 and I click on the next button, the RG will scroll back to item# 3.
  3. You may suggest to use set of pages and to move from one page to another. Maybe that will be a good solution, but it won’t be smooth like it won’t scroll and the movement won’t be animated.

If you have some fixes to these problems, please share with us.

Thanks in advance!

No problem,

Yes, as with many things in bubble, there are trade offs to a no code solution.

  1. you can set the initial value of your custom state to 1 or whatever number your starting position is. That way you will be adding index# to the starting position.

  2. You can easily do this with a vertically scroll group as well. e.g. if you have a RG
    displaying the first 6 entries, simply set your starting index to 3, and add 3 for each click.
    It’s not the best for responsiveness, but RG in generally aren’t and a popular solution seems to be to have several RG’s and switching between them for different resolutions.

The best solution I’ve found for the scrollbar, is to remove the scrollbar. From a user perspective this makes most sense since there’s no need for two inputs resulting in the same thing. You will still run into the issue when the user scrolls on a mouse however. So it’s not perfect.
You can remove it with CSS. I’m a big fan of @julienallard1 Classify plug in. It makes it’s super easy to add CSS.

I set up an example of the above here for you. I’ve added some conditionals on the buttons to disable them at certain points for a better user experience.

Editor

Example

5 Likes

Hello @casheets123!

The scroll buttons are working as expected. I have set conditions (just as you did in the example) on:

  1. The next button: when the state’s value is equal to RG List of files:count, it isn’t clickable.
  2. The previous button: When the state’s value is equal to 1, it isn’t clickable.

And in case, someone needs them to be clickable, I have added a workflow to not add the state’s value is equal to the RG List of files:count. (check video)

Half of the problem is solved. The other half of the problem is that the scroll bar isn’t being removed. I have Classify plugin installed and I copied the CSS code from your example to my app, but it is not working. I have also tried the single line code that is everywhere in this forum. Neither worked with me. If you can think of any thing that can remove the scroll bar, please share.

Update 1: I forgot to add the ID attribute to the RG. lol. Thanks again!

Thank you so much for the help! Really appreciate it!

1 Like

Your the MAN!!!

1 Like