How to remove scroll bar in repeating group

Need help New Responsive Engine
1

Hi you. I used new responsive design to build mobile page with some repeating groups. After that, I hit ‘preview’ and found that there is a scroll bar in only one table/repeating group while the other tables have no bar at all as follows:

  1. Table with scroll bar:
    image
    image
    image
    image347×541 16.2 KB
  2. One of other tables (no scroll bar):
    image
    image
    image347×515 13.2 KB

    image
    image345×547 15 KB

    I checked carefully and many times the settings for repeating groups above and think they are the same…
    Anyone of you could tell me what’s my wrong and how can I remove the scroll bar in the first table above?
    Many thanks for your help.
1 Like
2

Check the RG’s parent container, especially if the fixed-height is unchecked and fit height to content is checked.

2 Likes
3

@mickceb Thanks. All RGs already set with fixed-height left unchecked and Fit height to content checked. But problem remains…

4

I just had this same issue, very frustrating.

My RG was inside of a group-focus (GF) of the same dimensions, and both were “Fixed”. I changed the GF (the parent) to “Align to parent”, and made it “Fit to content” instead of “Fixed-height” and my scrollbar disappeared.

I hope that’s helpful.

4 Likes
5

Thanks for your suggestion, @noyourbroker

6

Hello folks,

I’m having the same issue. Maybe it is related to the new responsive engine?

I was able to move on following this suggestion: Solution to remove scroll bar from Repeating Group on all browsers

Thanks!

1 Like
7

Yes it was. thank you!

8

My RG was set to “Row” and “Fit width to content” was unchecked - set to horizontal scroll. After reading your answer I changed RG to “Align to parent” and enabled “Fit height to content”. The scroll bar disappeared and i can now make progress . Thank you so much.

9

You can add HTML element to a page:

<style type="text/css">
#noscrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
#noscrollbar::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
#noscrollbar{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
#noscrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#noscrollbar::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-thumb:active {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#noscrollbar::-webkit-scrollbar-track:hover {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-track:active {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-corner {
  background: transparent;
}
</style>

And add element ID to a repeating group you want to not have the scrollbar, in this case the ID is: noscrollbar

2 Likes
11

This doesn’t seem like a very satisfying fix… It doesn’t actually solve the height problem on the RG… Or am I missing something ?