Transcript

In this Quick Tip, we're going to learn how to build a vertical scrolling Repeating Group with the new responsive controls. A vertical scrolling Repeating Group will display a certain number of entries and then load more entries as the user scrolls within the bounds of the Repeating Group container.

With the Repeating Group on the page, we have certain 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 make a vertical scrolling Repeating Group, we uncheck "Set fixed number of rows". This unlocks the Repeating Group's rows from being fixed so we can scroll down to see more. We also have to be sure we have a fixed height or max height in the Layout tab; without this, we won't be able to scroll within the container. If we preview this, we can see our Repeating Group will now scroll vertically.

The downside of this is that we still have a fixed number of columns, which will prevent our Repeating Group from responding gracefully as the page resizes. So another way you can make a Repeating Group scroll vertically is to uncheck "Set fixed number of columns". In doing so, we have two additional properties: "Min width of column" and the "Scroll direction".

Since the columns are no longer fixed, we can control how many we want with either pixels or percentages. If we set this to 100%, we get one column; if we do 50%, we split the Repeating Group in half and get two. The caveat is then as the page shrinks, these columns shrink to this percent. If we wanted the columns to match the page as it shrinks, we would set it to a pixel value.

With control over which way we scroll, when we test the page, we have Repeating Group that scrolls vertically and resizes gracefully. Experiment and try it out for yourself!

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