Displaying repeating group in a "tag" like manner

[Ayjey]

I would like to display my repeating group in a tag-like manner like the image below

By that I mean I’d like them to stack next to each other when there’s space, and go to the next line if there is no space. So far I have not managed to achieve this.

Would you kindly let me know if there is a way to make this happen?

[sudsy]

Hi @Ayjey,

Yes, that can be done with a bit of custom CSS. Here’s an example…

• RG Cell Wrap

And here’s another helpful thread…

Listing all elements in a single cell in a repeating group?

Just to cover the bases, do you have the element id option enabled in your app settings? (Settings → General → Expose the option to add an ID attribute to HTML elements) If you do that and assign the rg-cell-wrap ID to your main (outer) RG, then you’ll have to tweak the CSS to target the inner (nested) RG. I think something like the following should work… #rg-cell-wrap .RepeatingGroup { display: flex; flex-wrap: wrap; height: auto !important; min-height: auto !important; } That s…

[Ayjey]

Thanks @sudsy
I was hoping that it wouldn’t involved CSS as it’s something I’m totally unfamiliar with. If no other solutions come up, I will try this. Thanks again!

[sudsy]

If it has to be a repeating group, there is no other option.

However, if you just want to create a tag cloud from a list of things, then there’s this option in the thread that I referenced.

EDIT

Note, however, that with the multi drop down approach, there would be no interactivity possible (user couldn’t click a tag), because you’re basically using an input element for display purposes only.

EDIT 2

@Jici makes a good point. There are third-party plug-ins that may work. I was thinking only in terms of Bubble-provided elements.

[Jici]

there’s a few plugin that can do that
My selectize dropdown can. But

Auto Adjust Width for RG Cells Plugin for Bubble, by Zeroqode

Smaal Tags + Tabs Plugin for Bubble, by Smaal

and I think there’s more but I don’t remember them all