Remove Scrolling on Repeating Group

Need help Responsiveness
1

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

2

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.

1 Like
3

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.

html element
html element306×550 61.7 KB

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

repeating group
repeating group307×551 71.2 KB

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

2 Likes
4

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

To just keep it to a fixed number of rows?

5

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

6

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

7

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

8

Have you set your max width and height correctly?

9

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.

10

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).

11

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

12

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

1 Like
15

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