Skip to main content

How To Create a Full List Repeating Group 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 full list repeating group with the new responsive controls.

A full list repeating group displays all entries in the list immediately, taking up as much space on the page as it needs.

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 full list repeating group, we uncheck Fixed number of rows so we can control the min height of the row. We'll leave the columns as fixed for now and we'll check Show all items immediately. This will load all the items our repeating group data source returns.

Depending on the container layout our repeating group is in, we can either fit height to content in a column or set an infinite max height with a row or aligned to parent.

When we preview the page, we get a full list of everything that a repeating group is searching for. Though because the repeating group columns are fixed, we have no responsiveness over it as the page resizes.

If we uncheck Fixed number of columns, we gain control over the width of columns with either pixels or percents. A percentage value will shrink the cell to that percent. So if we wanted the columns to resize with the page as it shrinks, we would set it to a pixel value for the size of our card.

If we preview the page, we have the same full list as before, but with control over how it responds on the page since it's no longer fixed.

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

Did this answer your question?