Please make cols center in horz repeating groups

I just wanted to post this… i have been griping about the lack of centering RG COLS in horizontal mode.


Right. So, it’s not that it’s not centerable. It is.

However, Number of Columns is static. So, if there are 7 columns configured, you’re stuck with that and if datasource:count < 7, you’ll have empty cells. (Because cells index from left to right, any empty cells will be to the right. Cell’s gotta fill from somewhere, right?)

Now, an observation that might provide us with an algorithmic workaround:

When a horizontal RG’s container (like a page or a group) is too small (not wide enough) to contain it, it can drop (hide) cells that don’t fit.

That’s interesting.

I’ve done that before with RG’s for things like reviews.

Now, I don’t think we can control the width of a group in vanilla Bubble via conditions. But it looks like you can with CSS Tools plug-in.

So that would be one way. (It’s just a simple math problem: If source:count < 7, set the RG’s parent group’s width to whatever you’ve set the cell min width to be * source:count)

That seems like it should work. (Obviously the cell min and max width need to be the same, so make sure you set your cell min width to its width at 100% in your design.)

If that does not work (or can’t work) you can brute force it, which I suspect you might be doing now, right?)

Build your 7 wide RG (first), AND your 6, and 5, and 4, and 3, and 2 and 1 (Which at that point isn’t an RG, I guess!)…

Condition 1 thru 6 such that they only show when source:count = their number of visible cells. The 7-wide RG should be conditioned such that it’s only visible when source:count is equal to or greater than 7.

This is kinda doubly redundant as of course the 7-wide can be configured to drop cells as the page width narrows. (And all the others should be configured the same way, which is part of why I say build 7-wide first so you can just copy-paste to build the others).

But you can achieve your design idea. It’s just kind of a pain in the butt. If the first idea works, that’s the best one obviously.

I tend not to get spun by INTERFACE (presentation layer) stuff that’s difficult with Bubble. Design a different interface, submit an RFE and hope it gets done.

However, there’s almost always a way in Bubble, if you insist on a certain layout. Some seemingly hard things are easy (I cloned the Airbnb photo uploader, for example, and it’s easy-breezy-ish), and some things that should be easy-ish are hard. (Yours is a pretty good example, I guess.)

In the brute force method: consider building it on its own page FIRST and turn it into a reusable to make it easier to maintain and use if you really wanna do it.

I’m not in front of my real machine right now, so all the above is just from my head. There may be other ways that would be apparent when actually noodling around in Bubble.

ASIDE: BTW, if the issue REALLY WAS that horizontal RGs can’t be centered, but num columns WAS dynamic, we could solve this problem easily with a nested RG contained by a group. But that’s not the issue, and we don’t currently have dynamic num entries in RGs.

1 Like

Thanks for the clear write up — no promises on this one but I’m putting it on our list to look at


:+1: I can actually see applications/benefits to this, so this would be a helpful addition. The generic solution to the problem is for the cols/rows in RG’s to be dynamic. Again, I’m assuming there’s a reason they are static, but if there’s no good reason for that…

Man now I’m going to have to play with some of your ideas. Josh said they were going to be looking at this so I’m excited it may come to be on its own. In the mean time I’ll play around with some of you’re thoughts in mind here

Your part about making the cols dynamic would actually fix it. Dynamic cols could be used in other interesting ways. There is another way though i thought of that may be useful.

What if there was a container group for RGs that had two modes… Always center. And always expand. This would allow multiple RGs to center in a group or scroll together as one of you went to make them go off the screen.

Always center would force it centered. Always expand would allow them to forever crawl right as if the page had no bounds, scrolling inside the group without overflow. The group would do the scrolling itself. So you could have 3 or more rgs linked as one inside a group. Kind of like the single horizontal rg is now just using more then one. Or have 3 fixed horizontal rgs centered together in the middle.

Basically just throw them in and the container does all the work. @keith @josh


This topic was automatically closed after 70 days. New replies are no longer allowed.