Horizontal Repeating List centered

I’ve spent my whole day trying to fix this but it seems impossible.




  1. The repeating group deals with DYNAMIC data but I can’t set the text field width to be ‘auto’ (WFT?).
  2. That means that I can’t even align things to left, the text needs to be centered to avoid weird white space between items.
  3. But we can’t center the whole element because once again, besides the fact that we are dealing with DYNAMIC content, Bubble want’s me to set a fixed number of columns.

Come on guys, it’s 2020… did you REALLY don’t have at least a chance to implement a decent flexbox option here?

It’s a great tool to create functionalities and systems, but it’s just TERRIBLE in so many ways to deal with design stuff.

Fala, brasileiro. (well, I’m guessing)

Yes, it’s rather frustrating the text width problem. I still have not been able to solve this myself so I just design around it.

If you have the time and inclination, the video on this post and this thread might have the elements for you to craft a solution.

1 Like

Did you try the “allow more than more than one column” setting: Introduction - Bubble Docs ? That might be a place to look.

Here’s how I go about it guys…

Settings > expose element IDs

On page > drop a html element and add the following code anywhere on the page:

<style>
#your_ID { 
display: flex; 
flex-wrap: wrap; 
justify-content: center; 
} 
</style>

On your RG ID attribute > add your_ID

Flip into responsive mode > in your RG settings > collapse margins at 9999

:v::v::v:

7 Likes

@nomorecode You are awesome!!! I’m very glad to know that, at least, we have the opportunity to manipulate CSS around Bubble. This is a light at the end of the tunnel and will make it more easy to solve other similar problems.

Thank you so much!

Yes, I have tried this before without success :frowning:

Yes, brasileiro hahaha.

I’ll take a look at this video, thank you for sharing!

You’re welcome mate, best of luck.

1 Like