If you’re trying to create a repeating group in Bubble that scrolls horizontally, then this is the guide for you.
In this tutorial, you’ll learn everything there is to know about creating a fully responsive horizontal repeating group.
The steps to build a horizontal repeating group in Bubble include:
- How to properly configure the data source of a repeating group
- The best approach to selecting dimensions for each repeating group cell
- How to correctly update the layout settings
- How to design fully responsive elements inside a repeating group
- How to correctly update the height settings
- Making horizontal repeating groups responsive on mobile
- The best practice for adding margins to a fully responsive repeating group
Full Transcript of Tutorial
1. How to properly configure the data source of a repeating group
If you’re anything like me, you find the process of creating a vertical scrolling repeating group to be a walk in the park. When it comes to horizontal repeating groups, however, it’s a completely different story.
Within my repeating group today, the data I’d like to display is just a list of users from my Bubble database. If I quickly just digress and open up my data tab, you’ll see I have a user data type, and within this, I have some standard fields. The three fields I’d like to display within my repeating group are the name of the user, their profile photo, and their job title.
Now, of course, you can display any information you’d like inside of your horizontal repeating group, but I just wanted to quickly highlight what data I’ll reference in my example.
So if we now jump back to our design tab, We can scroll down to our containers menu and add a repeating group to our page.
Now I’m just going to quickly move this to the last position on my page, so it sits below my page title. And like any repeating group, the very first thing you’ll need to do is update the data source. This will allow Bubble to know which information it should display from your database. If we jump over to our appearance tab, all I’m going to do is set the type of content to be a user.
Now, by all means, you don’t have to display users inside your repeating grou. You can display any bit of information you need. In my demo today, I’m just going to perform a search for all of the users in my database. That’s all I need to change for the data source.
2. Selecting the dimensions for each repeating group cell
After configuring the data source of your repeating group, we can now focus on designing the element.
When selecting my repeating group, the very first thing I’ll need to do is uncheck the option to have a fixed number of rows, as well as a fixed number of columns. When both of these options are not selected, you’ll now see the option to make this a repeating group that scrolls horizontally. This is the most important part of designing your repeating group in the beginning.
If we then review my checklist of design settings, we’ll see that the next thing we need to do is update the minimum height and minimum width for each cell inside the repeating group.
By default, you’ll see the height and width are both set at a minimum value of 100px. What this means is that right now, each cell is 100 pixels by 100 pixels – making it a small square.
Now when I’m working with a repeating group, particularly one that scrolls horizontally, I find that these two settings here are the most tedious things to configure. Depending on the type of content that you want to display inside of your repeating group, there’s no right or wrong dimensions that you select for these fields.
In fact, when it comes to creating a horizontal repeating group, finding the perfect dimensions is normally just a matter of trial and error. If you’re brand new to Bubble and you don’t know what values to add, please don’t stress. What I normally find is that the values I use in the beginning aren’t always necessarily correct. Once you add all of your elements inside each repeating group cell, you’ll get a better idea of the size that each cell needs to be. You can always come back and update this value at a future point in time.
For our tutorial today, I’m going to set both of these values to 320 pixels.
And look, there is a specific reason why I’ve selected 320. This is related to how Bubble elements respond on mobile devices. If I open my responsive view, you’ll see that the smallest possible device size for a user is a mobile that’s 320px.
While most modern mobile devices sit around 380px-420px, older devices like an iPhone 5 are 320px in width. This means that we’ll need to cater for all scenarios.
If the minimum width of a repeating group cell is set to 320px, this will ensure that it fits perfectly on any device a user has. If needed, we can always come back and update the minimum width value.
If we open our UI builder once again, we’ll now need to update the minimum height of our repeating group cell. When it comes to the height, you can set this as whatever value you would like. Today, I’m going to leave the height at 320px so each cell remains a perfect square. If you need to display a large amount of content inside your repeating group, you might want to update the value of the minimum height to suit accordingly.
3. How to correctly update the layout settings
The next thing we need to do is update the width settings within our layout tab.
This is where we can make the actual repeating group fully responsive. If we jump back into Bubble, we’ll open the layout tab. The first thing we’ll need to do is just update the container layout of this repeating group. Now when I’m building repeating groups, I personally like to add a group inside of it, so that way I can add a solid border around the group.
When you add all of your elements inside a group, it looks like this nice little card or tile that sits on your page.
For the container layouts, because I’m just adding one element into my repeating group cell (which is a group), it doesn’t really matter which option I select as I’m not technically stacking any elements. This means I can select between the row or column option.
For our example today, I’ll stick with the row option. If you wanted to select a column, you wouldn’t be entirely wrong.
Now from here, here’s the fun part. What we’re going to do is head down to our width and make this repeating group span across the full width of our page. To do this, we need to follow some basic design principles inside of Bubble. If we want an element to be fully responsive, what we need to do is unselect that this should be a fixed width.
When this element is a fixed width, it will only ever take up 280 pixels on our page, which is the exact width that you see here.
When I unselect that this should be a fixed width, we can now set the minimum width to be 0 pixels, then leave the maximum width as infinite. This means that regardless of the size of the browser, this repeating group can be as small or as large as possible.
4. How to design fully responsive elements inside a repeating group
Now, we can focus on actually designing all of the elements that are going to sit inside of our repeating group. In our guide today, I’m not going to bore you with too many details, because this is where I imagine your repeating group will look different to mine. If you’re watching this tutorial, you might have a specific type of information that you want to display inside of your horizontal repeating group.
In my example, all I’m going to do is add a few fields inside of a group. I’m sharing how to do this as I need to explain a few core concepts. Inside of each repeating group cell, I’d like to add a group that will house all of my elements.
If I scroll down to my containers menu, I’m going to add a group and place this into the first cell of my repeating group. Now, for this group, as I mentioned before, I want this to look like a card or a tile. To achieve this, I’ll add a solid border around its edges.
If I jump to my appearance tab, I’ll scroll on down to my styling menu and remove the default style. I’ll then select to add a solid border around this group. Finally, I’ll set the roundness of the borders for this group to be 10.
Because I’m also going to add all of my elements inside of this group, I need to pass along the data from my parent repeating group. This will allow me to reference all of the information of the user that I would like to display.
If I open the appearance tab of the group, I’ll set the content type to be a user. For the data source, I’ll simply perform a search in my database for all of the users.
After setting the data source, we can open the layout tab and choose what container layout style this element should be. As you’ll see in my example, I have a few elements stacked vertically on top of each other. This means my container layout will need to be a column.
Once you’ve given the group a container layout, you’ll now have the ability to update the width dimensions. If I wanted to make this group fully responsive inside each repeating group cell, I’d need to replicate the same settings I used before. This means I’ll set the minimum width to be 0 pixels, then leave the maximum width as infinite. This will allow my group to span across as much or as little space as it needs.
While we’re in the layout tab, I’m also going to scroll down and add 10 pixels of margin around every single border for this group. This will ensure there’s an even amount of spacing between my group and the borders of each repeating group cell.
You’ll also see the option to update the height settings of this group, but before we make any changes here, we’ll add all of the elements inside the group. To streamline this process, I’m going to copy across all of the elements from my existing group. The elements include the name, profile photo, and bio of a user.
Now, at this point, you can really start to see our repeating group coming together.
Once we’ve added all of the elements inside of a group, I’m going to select the group and set the minimum height to be 0 pixels. This will ensure that the height of the group collapses around all of the elements that sit inside of it.
And just like that, that’s all we need to configure for this group.
5. How to correctly update the height settings
It’s now time to make changes to the last few settings that will make our horizontal repeating group fully functional.
To be honest, this is probably where most people get stuck in the process. When it comes to setting up the height configurations, there’s a lot you need to factor in.
If we jump back to our Bubble editor, as you can see at this point, our repeating group still looks like a vertical scrolling repeating group. Right now, all of the cells are still stacked on top of each other.
You’ll also notice that the is still cascading directly down the page as well. This is due to the default height setting. Right now, I can see that this repeating group has a minimum height of 350 pixels.
So what that’s telling Bubble is that at the smallest possible size, this repeating group should be 350 pixels in height. Now, I can tell you right now, this is far more than 350 pixels. But the main reason why this repeating group is expanding down our page is because it has a maximum height of infinite.
This means that our repeating group can continually take up as much height as it wants on our page. In our app today, we only want our repeating group to consume the height of one row.
So what we need to do is create a fixed height on this repeating group. But how can you determine what the height’s going to be?
Great question. There’s more than one way to achieve this.
If you know the height of all of your elements, you can calculate these together. So for instance, with my image element, I can open the layout tab and see that the width of this image is 100 pixels. I can also see that it’s a fixed width.
Because this image also has an aspect ratio of 1/1, this means that the height here is also 100 pixels.
I also have 30 pixels of margin at the top of this image. This means that if I add 100 pixels in height, plus 30 pixels in margin, I have a total of 130 pixels.
We can then replicate the exact same process for every additional element in my group.
If I select the text element, I can see that I have 20 pixels of margin at the top, and within my appearance tab, the height of this text is 16 pixels. So 20 plus 16 is another 36 pixels.
Now, we could calculate the height of every single element that sits inside of your repeating group, as well as the margin, and that would get you the exact size of each repeating group cell.
Thankfully, in my opinion, there’s an easier way to do this. Sometimes you could just do this through a matter of trial and error, but today we’re going to take a more specific approach.
If I select my repeating group and open up my appearance tab, you might remember that at the beginning of my tutorial, I set the minimum height of each row to 320 pixels.
Once again, the reason why I selected this was because the minimum width of each column was also 320 pixels. This means it has become a perfect square. Now as I mentioned in the past, you can set this height to be whatever value you would like. If I really wanted, I could set this to be 500 pixels, but whatever value I add should be the same height as my overall repeating group.
If I open my layout tab once again, I should set the minimum height to be the same value. So it’ll be 500 pixels, but I’ll also need to make this a fixed height. Now today in my example, I don’t really have 500 pixels worth of content to display inside of my group. That’s why there’s all of this empty space at the bottom of it.
If I select the group itself and set its minimum height to also be 500 pixels, as you’ll see, it’ll stretch down my page. This just illustrates the point I was trying to make before. You can set the height of your repeating group to be absolutely any size.
If I were to now set this height to 320 pixels, I’d need to jump back over to my layout tab and make sure my height is also 320 pixels. I’ll also set this as a fixed value so that way it will only ever be this exact height. This means that if our repeating group takes up 320 pixels in height, we’ll only ever be able to display one cell within this. This then means we can’t stack more than one cell on top of each other, giving each cell no other option but to stack horizontally.
Something I should also note, is that it currently looks like my group has been cut off my repeating group. When I run a preview of this, however, that’s not going to be the case.
6. Making horizontal repeating groups responsive on mobile
Before we finish this tutorial today, I just also want to show you how to update the width of each repeating group cell. So far. I’ve only shown a very specific use case where the width of each cell is exactly 320 pixels. That’s why I’ve got these beautifully square tiles.
But look, not everything in Bubble is that simple. Sometimes you might need a lot more horizontal space to display all of the information you need. This is why I want to quickly jump back into Bubble and show you how to update the width of each repeating group cell.
Similar to the height, all you need to do is select the repeating group itself. From here, open the appearance tab and you can update the minimum width to whatever value you would like. If I set this to 500 pixels, what you’ll notice is that my repeating group automatically adapts to that size. The reason for that is because the group inside of this repeating group has an infinite maximum width. So this is fully responsive. It’s going to take up as little or as much space as it’s allowed.
If I then jump back into my editor and refresh the page, what you’ll now see is that each of my tiles is going to be slightly longer.
Now the other thing I should point out is that within my example today, there was a reason why I selected the width of each cell as 320 pixels. As I mentioned earlier, that was because the smallest possible device that someone could use my app on is also 320 pixels.
Now look, it’s not necessarily the end of the world if your tile stretches past the users device viewport. If I select my repeating group and set the width to 500 pixels, although it does cut off my group, the thing you need to remember is that I can always scroll horizontally to view the rest of that information.
This is one of the pros of horizontal repeating groups that you don’t have when using a vertical scrolling alternative. If you’ve added a horizontal repeating group into your app, users can almost pretty much expect to have to swipe across to view all of the content inside of it.
7. The best practice for adding margins to a fully responsive repeating group
The only other thing to note, is when adding margins to the side of your repeating group, you just need to factor this into the total width of the overall element.
If I jump back into my Bubble editor, what I’m going to do is set the minimum width of my column to 320 pixels. But let’s say, for some reason, I add 10 pixels of margin on the left and the right of the actual repeating group element (not the group that sits within the repeating group).
What you now need to realize is that when you’re viewing your device at the smallest possible size of 320 pixels, your repeating group doesn’t actually have 320 pixels to display. This is because you’ve added 10 pixels of margin on each size. So 320 pixels minus 10, minus another 10 is actually 300 pixels.
So right now the minimum width of your repeating group should actually be 300 pixels, not 320. And so that’s something I also just wanted to point out to help you make a truly responsive experience.
And finally, that was the very last thing I wanted to highlight within this guide today. Just like that, you now know how to properly setup and display horizontal repeating groups with Bubble.