Vertical scrolling group only getting 2 items

Hi,

I have a Repeating group set to vertical scrolling. My data source is set to “Search for thing:items unitl #10” but when the page loads it only displays the first 2. When I scroll once in any direction, the rest of the list loads.

any help?

When you inspect the repeating group, under “Layout Style,” how many rows is it set to display?

It says Layout style: Ext. Vertical Scrolling.
Rows: is set to 1.

OK, so External Vertical Scrolling is the reason the list loads on scroll. If you only ever want to display 10 items, change that to “Fixed Number of Cells” and set rows to 10.

I want to show a list of 5 (or 10) then scroll/load more on demand.

The Repeating groups height can display 3-10 depending on if there is an image or long text. I want to initially load a list of more than 2 so if there are items with only short text the user will see more than 2 when they scroll they can see more etc.

Got it. In that case, you can keep it set to Ext. Vertical Scroll but set rows to 10.

Hi @justin6 this is a feature, when set to ext scroll, to help with managing the throughput of data. Just to clarify what @rmorgan said, you add rows in your actual design, in the editor. It should load as many as are drawn, if there’s room on the screen for that.

Try editing your actual repeating group size and add rows. Let us know if that worked

When I increase the number of rows above 2 it loads more however, the cells overlap and do not work.

When the cells are set to 2 there is a big unneeded gap between each cell but still loads 3 ( enough to fill the screen)

No changes in data source or data itself;
Search for MyThing:items unitl #10

Repeating group rows: 1

  • Displays only 1 result.
  • Tried adding an empty group “spacer” not visible on page load, collapses its height when hidden.

This works but loads only 2 results.

Repeating group rows: 2

  • Displays 3 results.
  • Has an unnecessary gap.
    Then tried
  • adding an empty group “spacer”, not visible on page load, collapses its height when hidden.

This works but only displays 3 results.

Repeating group rows: 3

  • Cells overlap in the editor and on the page.
  • loads at least 3 not sure.

It does not work.

Hm, weird. Could you share screen shots of the issue in each state?

Not sure if this is the same issue I ran into, but here’s a workaround -

When in vertical scrolling, Bubble only loads the number of rows specified in the RG settings. So, if your RG had 10 items, but the RG is set to 2 rows, it will only load the first 2 until you scroll.

If you want all rows visible on load, add a workflow to (“Scroll to entry” - RepeatingGroup List of things last item), then (“Scroll to entry” - RepeatingGroup List of things first item). I’d suggest “Animate the scroll” for a cleaner look.

That will load them all for you, and reveal to the user that scrolling is possible…

2 Likes

Don’t know if this helps someone, but I had this issue too and wanted the scroll to be smooth:

Code to copy:

var rg = document.getElementById('rg')

rg.style.maxHeight = '600px'

rg.style.overflowY = 'auto'

You get the run javascript action from Toolbox plugin: Toolbox Plugin | Bubble

Expose the id attribute of elements in your app editor under:
Settings > General > Checkmark for ID attributes under “General appearance”

And add e.g. the id “rg” to your repeating group (RG).

Finally set your RG to “Full List” instead of vertical scroll.

Note: Of course you have to set the 600px to the desired size of your RG

Hope this helps someone out.

Happy Bubbling. :slight_smile:

3 Likes

Thank you for this idea. My RG’s sometimes have hundreds of results (and sometimes 1). Instead of waiting for them all to load and scrolling to the last, I had it scroll to #10 and that spurred the RG to load enough to fill the space. Animating the scroll is genius.