Bubble Docs
Search…
Repeating Groups
Repeating Group controls have been updated to provide more control over layouts and compatibility with the new responsive container layout types. All existing repeating group layouts (i.e. full list, ext. vertical scrolling) can be recreated with these new controls as well as new layouts previously not possible.
The bottom of the page contains instructions on how to recreate the legacy Repeating Group layouts to help you get familiar with the expressivity of the new settings.

Fixed # of rows or columns

Check fixed number of rows or column if you'd like to display a fixed number of rows or columns in run mode, regardless of the screen size or number of entries in the List. Check both boxes to recreate the legacy Fixed number of cells repeating group layout.

Set fixed number of rows

Check this box to have the repeating group show a fixed number of rows. Cell height will be determined by the height of the overall repeating group container divided by the number of rows specified. Use the show next / show previous workflow actions to paginate the table and show more data.

Rows

Set the number of rows you’d like to display.

Set fixed number of columns

Check this box to have the repeating group show a fixed number of columns. Cell width will be determined by the width of the overall repeating group container divided by the number of columns specified. Use the show next / how previous workflow actions to show more data.

Columns

Set the number of columns you’d like to display.

Show partial list on last page if needed

Check this box to show a less than specified number of rows or columns on the last page of a paginated table if needed.

Dynamic # of rows or columns

Uncheck fixed number of rows or column if you'd like to display a dynamic number of rows or columns in run mode - i.e. to recreate legacy vertical scrolling or horizontal scrolling repeating group layouts.

Min height of row

Specify a minimum Repeating Group row height. The Repeating Group will default to filling as many cells as the data allows at the minimum height, and then grow in size evenly to fill the remaining space.
For example, if you have a repeating group with a height of 440px, a min height of 100px, and 5 entries in your List, the repeating group in run-mode will initially show 4 cells at a height of 110px each.

Min width of column

Specify a minimum Repeating Group column width. The Repeating Group will default to filling as many cells as the data allows at the minimum width, and then grow in size evenly to fill the remaining space.
For example, if you have a repeating group with a width of 440px, a min width of 200px, and 10 entries, the repeating group in run-mode will initially show a repeating group with 2 columns at a width of 220px each.

Scroll direction

If Set fixed number of rows and Set fixed number of columns are both unchecked, choose the direction you’d like the repeating group to scroll.

Show all items immediately

Check this box to load all of the data right away. This is similar to legacy Full List repeating group behavior.

Container layout type

A repeating group cell is a container as well and can have one of the following 4 container layout types: Fixed, Align to Parent, Row, and Column. Select the appropriate container layout type depending on what child element behavior you want.

Create legacy Repeating Group Layouts

Follow this guide to learn how to create legacy Repeating Group layouts using the new responsive controls. The following repeating group behavior is only a fraction of the options now possible.

Fixed number of cells

This layout showed only a fixed number of cells, no matter the number of entries in the List.
  • Fixed number of rows:
  • Fixed number of columns:
  • Fit height to content:
    • This option is only available when the parent container layout type is Column or Align to Parent

Full List

This layout loads all entries in the List immediately, causing the parent container to grow to fit as well.
  • Parent container of Repeating Group container layout type: Align to Parent, Row, Column
  • Fixed number of rows: Unchecked
  • Fixed number of columns OR dynamic number of columns with scroll direction -> vertical
  • Load all cells immediately:
  • Fit height to content:
  • Max height (repeating group): inf
Note: If the above repeating group is located in a parent container with a container layout type of Fixed, the repeating group will act like a Vertical Scrolling repeating group.

Vertical Scrolling

This layout renders at a fixed container size and then loads more data as the user scrolls.
  • Parent container of Repeating Group container layout type: Align to Parent, Row, Column
  • Fixed number of rows: Unchecked
  • Fixed number of columns OR dynamic number of columns with scroll direction -> vertical
  • Load all cells immediately: Unchecked
  • Fit height to content: Unchecked OR Max height (repeating group)-> fixed value to force scrolling

Extendable Vertical Scrolling

This layout renders as many entries as will show up on the screen, and then will load more data by extending the page as the user scrolls.
  • Parent container of Repeating Group container layout type: Align to Parent, Row, Column
  • Fixed number of rows: Unchecked
  • Fixed number of columns OR dynamic number of columns with scroll direction -> vertical
  • Load all cells immediately: Unchecked
  • Fit height to content:
  • Max height (repeating group): inf

Horizontal Scrolling

This is like the vertical scrolling layout, but scrolling horizontally instead.
  • Fixed number of columns: Unchecked
  • Fixed number of rows:
    • 1 Row
  • Load all cells immediately: Unchecked
Last modified 2mo ago