Skip to main content

How To Create Horizontal Scrolling Repeating Groups With Bubble’s New Responsive Editor

Sofia Maconi avatar
Written by Sofia Maconi
Updated over 3 weeks ago

Transcript

In this Quick Tip, we're going to learn how to build a horizontally scrolling repeating group with the new responsive controls.

With the repeating group on the page, we have new controls at our disposal. By default, a repeating group will have two checkboxes: Fixed number of rows and Fixed number of columns.

To make a horizontal scrolling repeating group, we uncheck Fixed number of rows and uncheck Fixed number of columns, so we can control the min width and height of the repeating group rows and columns. By doing this, we also expose the property allowing us to set a scroll direction for the repeating group, which we will set to horizontal.

Also, be sure to uncheck Show All Items Immediately, so they don't load all at once. If we preview this, we can see each item load as we scroll horizontally.

A new feature this provides us with is the ability to scroll horizontally with multiple rows. If we change our min height of the repeating group to double in size, we will get a second row. When we preview the page, we can see the entries on another row and still scroll left to right.

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

Did this answer your question?