Centering repeating group elements

[blastercbi]

The problem is clearly described here:
http://forum.bubble.io/t/please-make-cols-center-in-horz-repeating-groups

I’ve been struggling with this important missing feature, I’ve seen a lot of posts asking for this, what worked for me is using the Toolbox plugin and running the following code when page is loaded:
$( “div.RepeatingGroup > div.rows” ).css({
“display”: “flex”,
“flex-wrap”: “wrap”,
“justify-content”: “center”
});

This will change justification of all repeating groups on page. If you only want to change for one, then assign an id attribute to a specific repeating group and replace div.RepeatingGroup with #yourId.

[retronwebservices]

Thanks for the tip!

[chrismoris]

@blastercbi Hey there, I tried this with the plugin but was not getting the repeating group to center. Is there something I am missing:

• Installed plugin
• Copied your code exactly into a page load Javascript workflow
• No modifications to the code

I have a bunch of different visibility states, but it is all a single page application. I tried to also trigger the script later on (during that state’s workflow) but no successes.

[draked123]

Im also unable to get this to properly work.

If someone has a solution, please tag me!

[nickhutton13]

Hey @blastercbi , @chrismoris and @draked123 ,

Did anyone find a solution to this? I’ve tried running the javascript but it does nothing. My app is going to be in real danger if I can’t work it out!!

[Christophe_HK]

Try to add an ID to your RG element, example : myrg

Then add a HTML element in your page, it must be visible but you cs’ set it 1px width / 1mx height a d put it at the x=0 and y=-1 position on your page.

In the html element, add the following to add the css rule to center the RG :

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

Give a try and let us know.

[nickhutton13]

Thanks for getting back to me @Christophe_HK.

That certainly helped, in that it centred it on the desktop width. But it still hugged the left when I shrunk it down to the mobile width. Do you know why that would be? I didn’t full understand what you meant by “setting it 1px width and height and putting it at x=0, y=-1” comment so maybe to do with that?

[pipe13]

thanks brother!! <3

[nickhutton13]

Actually, I had an element hiding in there which was stuffing me up. Fixed that and it works beautifully

Thanks mate!

[keyhanimo]

@Christophe_HK

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

Thank you so much for this! Solved a problem I’ve been trying to solve for weeks.

[Christophe_HK]

Enjoy

[julienallard1]

Very neat solution!

If I may add my 2 cents, using ID is fine as long as the repeating group isn’t nested in another one because this would generate multiple RG with same ID which is not supposed…

Using Classify plugin, it’s possible to set CSS classes instead. The code would become:

<style>
.myrg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
</style>

[Christophe_HK]

Much better indeed @julienallard1!

[Christophe_HK]

Classify plugin is an awesome plugin, one of the best for any Bubble app. But to be honest, for the front part of my apps, I’m now using a single html element, containing components (mainly bootstrap 4). The page load decreased from 7 or 8 seconds to less than 4 seconds. But what’s good is that into the html element, I take benefits of the Bubble’s dynamic values. Powerful!

[julienallard1]

This is awesome. I once really considered doing just that; giving up on Bubble’s element and coding my own HTML with a grid responsive design. But while, like you said, we can insert Bubble’s dynamic data directly in the HTML, we loose the ability to trigger workflows from it and we can’t read the input’s like this dropdown's value.
The only efficient way that I know is by using Javascript to Bubble, but this add another level of complexity…

How do you manage to send data from the front-end back into “Bubble’s world”?

[Christophe_HK]

[italocp]

Just wanted to share the following:

I found a way to center the RG using CSS tools. Here’s what I did:

1 - Added the Plugin CSS Tools by Zeroqode;
2 - Placed a CSS Tools element on the page;
3 - On the page upload workflow, I added the element action: “Add Custom Style to Head”, on CSS element on the page:
4 - On the CSS field I added:
.rows {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
This changed the class “rows” of the repeating groups on my page, thus centering the last row of my RG, with the “Full List” layout style.

Hope it helps someone out there.

[romain.boyer]

Following previous solution by italocp (thanks!), I had this working, just 2 elements were missing for my horizontal repeating group to make it work because forced width and floating were impeaching this to work:

.rows {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    float:none!important;
    width:auto!important;
}

[clubedotas]

Olá bom dia, criei uma solução que me ajuda a centralizar de forma simples sem plugin:
Obs: Testei apenas no modo responsivo

1º Centralize groupA
groupA
width-min: 45px width-max:inf

2º Dentro do groupA, coloque um RepeatingGroupA e tambem centralize.
RepeatingGroupA
width-min: 45% width-max:inf
rows 1
set-fixed-num-cols: no
min-width of col:40px
fit-width-content: yes

3º A imagem abaixo é o RepeatingGroupA, usei o [fa]heart-o[/fa], apenas para ilustrar o conteúdo