Forum Documentation Showcase Pricing Learn more

Styling: How to split outline on lists? (i.e. comma/space separators)?

Hi I am trying to create tags, similar to the app dashboard in bubble:

However, my styling outline does not get split in a list of things, but rather creates one whole outline. How can I split the list of chars, rather than having one full string. Here is what it currently looks like?

Please note, for this implementation I am strongly against using a repeating group because it would cause a nested repeating group, which would not be good for performance. Please let me know if there is a better way to split the outlining without killing performance

Is your initial data a list of text or a single text?

@julienallard1 My initial data is a list of texts

Then I’m not sure I understand your request. What do you need to split if your data is already a list? Do you need to split each item from the list?

I need to split the styling, so that the styling border ends and starts at each item of the list, making them look like separate boxes instead of one long rectangle.

Have you tried the plugin Multiselect dropdown? It looks like what you’re looking for.

otherwise if you really want to avoid using a repeating group my opinion is to use an HTML and build the tags from the ground up.

I’ll check it out thanks. I’ll update the thread once I take a look

I was curious to try it out myself. I ended up with this (no repeating group, no database interaction, no javascript; HTML and CSS only):

*The element “Javascript to Bubble” is necessary to delete tags.

Here are the links to try it out + the editor.

1 Like

Looks awesome. Thanks for helping me out first-hand with this. I will take a look at this tomorrow, and I’ll update this thread.

your solution-- html/css is likely much better for performance than anything else I had in mind.

1 Like

Yeah this is a great solution. Thanks a lot @julienallard1

Just for reference, I found two other relevant plugins create a tags system + additional functionality.

they will probably be easier to use then my solution