Forum Documentation Showcase Pricing Learn more

Tip: Converting simple list output to tag-like element

Tl ;dr. Get a nice looking list output, rather than the normal commas or line breaks.

I was searching around how to make my boring output look a little prettier. It was basically a list of things that outputted like this:

Yacht Ratings Certificate, PWCI, Navigation and Radar (OOW), Master 500gt (yacht), GMDSS (ROC)

I liked the thought of adding each list item to a tag display, but I couldn’t really find what I wanted here in the forum so I created something myself. I thought I would take a little time to jot down how I did this, and who knows, it might help someone else looking for the same thing too.

Initial (boring) list:

skill4

skill2

I knew I needed to insert some <div>'s and <span>'s for styling. Unfortunately, text elements don’t allow for these to be added /replaced. I replaced the text element with an HTML element. Here’s what I managed to output. Much better than the original text element could manage.

HTML element

skill5

skill3

The trick is to:

  • Add a div before the dynamic data
  • Use “join with” on the dynamic data using an end and start span
  • Add a closing div after the dynamic data

By the way, I don’t normally have css on-page - it’s just for this post. Hopefully this helps someone :slight_smile:

FYI, I changed the styling code slightly so it wraps the tags correctly:

.tag-list span {
    padding: 2px 4px;
    border: 1px dotted rgba(1, 176, 187, 0.65);
    border-radius: 5px;
    color: rgba(1, 176, 187, 1);
    font-family: Roboto;
    font-size: 12px;
    margin: 0 5px 10px 0;
    font-weight: 500;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
}
6 Likes

Great post. Another easier solution is to use this plugin

1 Like

Thanks. I wasn’t aware of that plugin. I like to try and figure these things out myself when I can - making things a little easier to debug and maybe even keeping the app a little lighter.

Thanks for sharing this, makes things a lot easier and cheaper to use what is available from bubble directly. I’ve been struggling with this as well and appreciate the post on how to accomplish it. Thanks for the putting in the hard work to get it figured out for all other users.

You’re welcome!

Hi @AliFarahat, I was looking at your plugin to kind of replace bubble’s multidropdown plugin.

From what I see the plugin you offer allows to display a list of elements as beautiful tags, but checking the editor, I didn’t see the feature of multidropdown. meaning, selecting different options from the dropdown that are then diplayed as tags.

Flat & Modern Tags from zerocode seems to offer a similar solution to yours, but neither seem to have the dropdown/select feature. Am I correct ?

Do you have a plugin in store that can mimic multidropdown ?

Many thanks in advance
Thomas

Hey @Tomdez1989

Unfortunately no. I had a request earlier to build such a thing but since I can not really determine the demand for it I can’t really commit to making one.

Very useful trick indeed! I was looking to do the same thing and ended up using a repeating group displaying a list but each tag would have the same length.

Would you however know how to make these tags clickable? This could be done with the repeating group but with this html element I don’t seem to have the option available.

Thanks a lot!