Skip to main content
All CollectionsBubble FeaturesQuick Tips
How to Create Ext. Vertical Scrolling With the New Responsive Engine
How to Create Ext. Vertical Scrolling With the New Responsive Engine
Updated over a week ago

Transcript

In this Quick Tip, we're going to learn how to build an extendable scrolling Repeating Group with the new responsive controls. An extendable scrolling Repeating Group will display as many entries as will fit on the page, then load more as the user scrolls down the page.

With the Repeating Group, we have many controls at our disposal. By default, a Repeating Group will have two checkboxes: "Set fixed number of rows" and "Set fixed number of columns". To set this up, we'll uncheck "Set fixed number of rows" so we have control over the min height of the row. We'll leave the fixed number of columns for now.

For this to work, "Show all items immediately" needs to be unchecked, and in the Layout tab, make sure our max height is infinite. Depending on the parent container, we either have to vertically stretch the Repeating Group to its max height or fit the height to the content as you continue to scroll down the page.

Since our parent container is a column in this case, we'll select "Fit height to content". If we preview the page, we can see our Repeating Group will now load as we scroll down, making this an extendable scrolling Repeating Group.

Another way we can build this is by unchecking "Set fixed number of columns" and leaving the scroll direction as "Vertical". The benefit of this is that since the columns are no longer fixed, we can resize the page and the Repeating Group will respond gracefully.

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.

Did this answer your question?