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

Need help Database
1

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

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?
image

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

2

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

3

@julienallard1 My initial data is a list of texts

4

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?

5

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.

6

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.

7

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

8

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):

demo

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

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

1 Like
9

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
10

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.

11

Nice
they will probably be easier to use then my solution

12

I actually ended up using your solution since it was lightweight and much more customizable. A couple issues I’m facing is having conditional styles for the html. For instance: red background for data constraint and a blue background for another data constraint. I’m wondering if this is possible to do with html + bubble.

Also, there’s a bug where the html style gets overwritten by similar html. For example, 2 of those html elements, but one with a red background and one with blue gets overwritten by whichever one appears first. Is there some sort of reset or !important keyword that I’m forgetting to make it persistent?

13

You can use Bubble’s condition tab to add and remove classes. This can allow you to change any CSS properties you want.

As for the bug, you have to find what overwrites the html style and work out a way to select your elements with CSS in a way that does not interfere with Bubble’s own styling.

1 Like