Tip: Converting simple list output to tag-like element

Tips
21

Is it possible to use my custom font that’ve uploaded in bubble.
Atribute font-family doesn’t work

22

Hi Rob

I saw your post from Jan and thought I’d let you know about a tutorial I put up if you have not yet found a solution to your issue.

I believe after viewing the tutorial you’ll be able to set up the stored color attribution for a chip as the tutorial has content devoted to changing the color to a stored color and to do so in a repeating group so you can have multiple chips of different colors based on option sets.

There is editor access as well so you could optionally copy and paste the feature into your own application.

Learn More

Boston85719 is an expert Bubbler with a decade experience as an educator. Real name Matthew, he has been actively building SaaS apps, marketplace apps, scheduling apps and more for clients, himself and for sale as templates.

As an official Bubble Bootcamp Instructor, he leads Bubble Bootcamps on a regular basis.

Always willing to offer advice via the Bubble Forum, Matthew also offers Private Personal and Group Training Sessions.

Through his site, NoCodeTrainer, Matthew provides a range of tutorials with editor access to help you jumpstart your Bubble development.

Always accessible you can send Matthew a private message via the forum or send an email directly with your requests.

Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.

Stripe Integration Course

NoCodeTrainer.com

4 Likes
23

Just a head up, you can pretty easily get this functionality with Bubble RGs and Text Elements. See example below.

Screenshot 2022-01-20 01.12.18
Screenshot 2022-01-20 01.12.181331×557 641 KB

I created a sample app to demonstrate:

Here is a link to a demo page: Bubble | No-code apps

Here is a link to the editor: Rg-chips-tags-demo | Bubble Editor

You can do this by following these steps:

  1. Make your RG Full List with 1 row and 1 column.

  2. Deselect “This repeating group has a fixed width” and select “Allow more than one column when stretched”.

  3. Add an ID Attribute to the RG (I’m using “tag_rg” as my id).

  4. Add a text element inside the RG’s one cell that is the same width as the cell. Add your dynamic text content to this text element and style it however you prefer.

  5. Add the following code snippet to your Page HTML Header found at the bottom of your page’s element editor dialog.

<style>

#tag_rg .bubble-r-box, 
#tag_rg .bubble-r-line, 
#tag_rg .group-item, 
#tag_rg .Text {
width: auto !important;
position: relative !important;
}

#tag_rg .group-item {
padding-right: 10px !important;
}

</style>
  1. Tweak padding as desired.

Hope this helps everyone!

4 Likes
24

Hey @aj11, would it be okay if you expanded on what you put above? In particular about how the tag/chips are styled. A link to a demo editor would be incredible, I just want to experiment with this a bit more. I followed the steps set out above and didn’t get the result I was expecting, everything in the RG was merged into the one cell.

25

I’ve added links to a demo and editor to my previous post. The CSS also had an incorrect element id, which I’ve now fixed.

1 Like
26

Whoah, this is brilliant! Thank you @aj11 , I appreciate it. I wonder if you’ve encountered the same height issue below the RG, it pushes everything down by about 200px. I’ll play around with fixing it with css but if you’ve encountered it you may already have a solution! Thanks again!

1 Like
27

mattb You are a legend. Thank you. I spent 4 hours on it and then luckily came to your post and found the answer. thanks

28

Yes I don’t think I addressed it as it wasn’t causing problems with my design, but you can put the RG inside of another group and then target the id of that group with #id {height: 26px !important; overflow-y: hidden !important;} Just replace 26 with your ideal height and this should control that.

29

@aj11 I’ve got a similar problem to @kelsie.murphy but it’s expanding my group by about 500px extra than the content.

I’m not really very familiar with CSS or HTML…I’m wondering are you able to show me exactly how to set this up? Would I put it in the same HTML element as the rg tags? Or would I need a second one for this? I had a quick go at it but it doesn’t seem to work for me…I’m sure it’s just something small in my formatting.

30

Hi everyone! Excited to announce a new native feature to our repeating group container that will allow you to build this “tag like” list!

1 Like