Remove Scrolling on Repeating Group

[blackandbrownskin]

Hi

I want to remove the vertical scrolling on repeating group because on mobile version of our app it stops us from being able to scroll down the page easily. Instead it’ll scroll down the repeating group and then you have to click near the edge of the phone to be able to scroll down the mobile page.

If anyone knows how to do this please let me know

[oliviercoolen]

Your RG is probably set to have a max height or a fixed number of rows. Make sure it hasn’t any of these and it’s set to fit height to content. This will most likely fix your issue.

[karamwise]

Hey @blackandbrownskin ,

Here is the solution to your problem. Use the HTML element on the page and place it where you wish to.

 <style>
   <!-- 
.scrollClass {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.scrollClass::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.element::-webkit-scrollbar {
    -webkit-appearance: none;
}
     -->
</style>

Please copy the above text and paste it into the html element.

Now put the ID attribute in the repeating group. As shown in the below screenshot.

This will remove the scroll from the repeating group.

If any further assistance is required please contact me on:
LinkedIn:- Karamjit Singh - Aprintaa - Rank First To Earn Fast! | LinkedIn
Gmail:- karamwise@gmail.com

[adamhholmes]

So what do you want to happen instead of the RG scrolling?

To just keep it to a fixed number of rows?

[blackandbrownskin]

This is the error that i am talking about because the repeating group is scrolling down and horizontally when you are using our website on mobile it because super hard to navigate through the site.

Ideally, we’d just want it to be fixed in place so that when the user scrolls, they scroll down the page rather than scrolling down the repeating group if their thumb is in the middle of the page. The scrolling for the entire page is only possible when your finger is right at the edge of the screen which is not ideal

[adamhholmes]

So you just want the RG to have horizontal scroll on mobile?

[blackandbrownskin]

We want it to have no scroll, we have a nav bar which allows you to flick through the different elements in the RG

[adamhholmes]

Have you set your max width and height correctly?

[paulronoh2019]

You can remove the scroll using the code given by @karamwise . use the HTML element and set the width and height to 1px for each. Copy as it is.

Alternatively, check the vertical scroll not horizontal, and dot your RG a min-width of 0px and min height of 0px in the layout tab then in the appearance tab, set min height of the row to say 50px and min width of the column to 250px. your problem will be solved. Don’t set a fixed number of rows or columns. If you need further help don’t hesitate to reach out, I will help you.

[ihsanzainal84]

Do as suggested by @oliviercoolen

You don’t need any extra CSS for what you want to achieve (unless you want to remove the scrollbars).

[richard.barnecut]

The thing that helped me with a similar problem is making sure my alignment of these elements was set to be top-justified.

[dylanjschmidt]

If anyone here is still struggling with this-

Make the repeating group fixed height,
Make all other items in the rg another group, also fixed height. This will fix the whole RG in place on the page so you scroll past in rather than within it

[start]

This worked for me:

1. Install the toolbox plugin.
2. Create a “when the page is loaded” trigger on the affected page.
3. In this trigger add a “run javascript” action of the toolbox plugin that runs the javascript down below.
4. Add the id “my-repeating-group” in the ID-Attribute of the affected repeating group.

document.getElementById("my-repeating-group").style.overflow = "hidden";

Check out our agency:
Rocketlaunch.ch

[braydenvtv]

check the box “show all items immediately” plus what the others have said about no height limits and fit to size

[if.started]

Hi @blackandbrownskin ,

This is a common issue, especially when designing for mobile responsiveness. To remove the vertical scrolling on a Repeating Group in Bubble.io and make the page scroll smoothly instead, you can follow these steps:

1. Adjust the Repeating Group Layout:

• Set the Repeating Group’s layout to “Full List” instead of “Vertical Scroll.”
• This ensures all the items are displayed in the group without adding a scroll bar. Be mindful that this might impact performance if your data set is very large, as it loads all items at once.

2. Use Groups and Hiding Rules:

• Instead of directly using a large Repeating Group, display fewer items by combining Groups with conditional hiding or pagination logic.
• For example, you can show 10 items at a time and load more items when the user scrolls or clicks a button.

3. Optimize the Page’s Scroll Behavior:

• Ensure your Repeating Group doesn’t interfere with the page’s scrolling by wrapping it in a Group and testing with different layout constraints in the responsive editor.
• Add padding around your Repeating Group or ensure it doesn’t occupy 100% of the page height on mobile.

4. Consider a Floating Group:

• If the issue persists, use a Floating Group for other page elements and anchor it to the bottom or top. This avoids overlapping interactions between the page and the Repeating Group.

I hope this helps! Let me know if you’d like further guidance.

---

About Us

We’re If-dev, a Korean Bubble Agency dedicated to helping startups and businesses succeed on Bubble.io. Whether you’re troubleshooting a specific issue or need end-to-end support for launching your app, we’re here to help!

Email: support@if-dev.io
LinkedIn: https://www.linkedin.com/in/mbseo/
Website: https://if-dev.io

Your success is our success, and we’d love to collaborate with you to make your vision a reality.

[idanishsheikh]

hey this isnt working. Am i doing sthg wrong? this ID attribute is linked to the RG.