How make a repeating group's cells flow like text?

Need help Responsiveness
1

Hi Bubblers! My first post.
I have a repeating group like this:
image
Is there a way I can make each cell’s content flow from left to right and then wrap to the next line like words on a page? Here’s a mockup of what I’m going for;
rgflow
Thanks in advance,
Richie

2

Hey there,

There is already a topic somewhere here about that. Just add some css to your repeating group and it should be done easily.

Make the rg horizontal scrolling and add something like

display: flex
flexwrap: wrap

1 Like
3

Check Small Tags plugin :v:

4

Hi David, That worked perfectly, thanks.

image

I found the previous post you were talking about;

Thanks @sudsy for that.

I’d never tried adding CSS before. For any other beginners out there this was super easy…

  1. Set up a HTML block to add your CSS and associate your element’s ID. This oldish YouTube video explains that well.
  2. Paste in this code (where yourelementid is id you’d assigned to your rg as per the above video)
<style>
   #yourelementid 
   {
      display: flex;
      flex-wrap: wrap;
   }
</style>
3 Likes
5

You can also just add this working example to your app. (Resize the window to see it in action.)

Also, if you’re on a paid Bubble plan, the CSS should ideally go either at the page or app level. An HTML element certainly works, but it’s not quite as “clean” because it clutters the element hierarchy and often requires negative margins to position it outside the container.

6

Do we still need CSS as of 2023 with the new responsive engine?

7

No need for CSS, you can follow this post’s solution: Row Layout inside Repeating Group

1 Like