Bubble.io tutorials

Bubble.io Horizontal Scroll in a Repeating Group - Easy 2 min guide (2024)

Thomas COUDERQ
June 14, 2024
bubble ui kit nocodablebubble ui kit nocodable

Making Horizontal Scrolling Tables is a must have skill in Bubble.

Whether you're a beginner or an intermediate Bubble.io developer, mastering this technique can significantly improve the user experience of your app.

Especially because it's the best way to easily make a Table responsive.

This tutorial will guide you step-by-step on how to implement an horizontal scroll in a repeating group, ensuring your application stands out with seamless navigation and a modern UI.

Here's what we'll build in this tutorial :

Step 1 - Build your Repeating Group UI

The first step of this tutorial is of course to actually build your Repeating Group's UI.

You can apply this tutorial to pretty much any types of UI (Tables, Grids, Carousels etc...), but the thing to remember is that in this tutorial we will use a Repeating Group to create our Table.

We'll cover the Table elements in another tutorial.

To illustrate this tutorial, I'll be example this Table below from Nocodable Component's library :

bubble.io table repeating group

As you can, see nothing too crazy. Simply as nice and neat Data Table.

But when the page gets too narrow, here's how it behaves :

bubble.io horizontal scroll repeating group

As you can see, as soon as the screen gets too narrow my Tables starts overflowing and enable me to Horizontally Scroll into it. Which in turns enables me to view all the information displayed.

If you want to take a closer look to it, you can live preview this component here : Table 7 - Nocodable Components Preview

Now before going further, let's take a closer look at how it's built :

bubble.io data table horizontal scroll

As you can see above, my Repeating Group is composed of two groups :

  1. The "Group HEADER" that contains the titles of my Table
  2. The "Group MAIN LINE" that contains all the information of the Current Row

For those wondering, the "Group HEADER" is hidden by default and only visible on the First Line of my Repeating Group using the conditional below :

bubble.io table header in repeating group

Finally my "Group MAIN LINE" is simply composed of various Groups and Text Elements with a Row Layout.

bubble.io data table

Step 2 - Making it Scrollable

Alright now, let's dig into actually add an horizontal scroll to this Table.

a - What makes a Repeating Group Scrollable ?

First, we need to understand what makes a Repeating Group scroll horizontally ?

Basically, Repeating Groups in Bubble become scrollable when the content displayed inside of them starts overflowing (i.e is becoming wider than the repeating group).

Sounds easy, right ?

Well yes, it actually is.

Simply keep in mind that we do not want the Repeating Group to be wider than the page, we want the content inside of the repeating group to be wider than the page.

how to make horizontal scroll in table in Bubble.io

b - Actually making it Scrollable

Now that we know that, all we need to do is to let the Repeating Group stretch as much as it can and apply a Min Width to the Groups inside of the Repeating Group.

This way when the page will get too narrow, the Content inside of the Repeating Group will start overflowing due to is Min Width, which will make our Repeating Group Horizontally Scrollable.

bubble.io horizontal scroll rg

Now, all you need to do is make sure that all the Groups that are placed directly under your Repeating Group have the same Min Width.

In my case, I need to make sure that the "Group HEADER" and the "Group MAIN LINE" both have a Min Width of 800px.

And obviously, 800px is an arbitrary value, you'll have to adapt it based on the content inside of your RG and how wide it is.

If you have a lot of information displayed, you might end up with a 1000px min width for example.

There you go ! You now know how to make an Horizontally Scrollable Repeating Group in Bubble 😎

Ship your project in days, not weeks.

The most complete and diverse components library for Bubble. All you need to build on Bubble, faster then ever.
Start building
No credit card required

Latest Articles