How can I create chips in bubble?

Questions
22

@Sarah_Esteve no problem!

That’s the error message you get when the javascript plugin element isn’t setup correctly.

Take another look at my example page, i’ve just added “example 10”, which uses option sets. :+1:

23

You can pretty easily get this functionality with Bubble RGs and Text Elements which makes triggering actions and handling formatting much easier. 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!

24

oKAY I understood why it was not working… I had a OS display like “women’s right”

After remove the " ’ " it is ok now :slight_smile: thanks for providing an example for OS !

25

thank you but unfortunatly this is not working when using the new responsive engine :confused:

26

@Sarah_Esteve awesome! Glad you got it working, good to know " ’ " breaks it too!

1 Like
27

Dang, that’s unfortunate. I thought they had native support for this in the new engine, but I guess not.

1 Like
28

There are quite a few threads like this, using HTML and/or CSS styles and JavaScript handlers to create tags. They work, but you lose much of the power of Bubble to organise and understand your app if you do it that way.

I’ve just created an incredibly simple plugin that makes any Repeating Group you choose flow from one row to the next, rather than being a fixed grid. It makes it simple to create HTML chips in pure Bubble, gives you complete design and interaction freedom, and doesn’t require any knowledge of HTML, JavaScript or CSS.

1 Like
29

Thank you @michael.fielding . I just tested your plugin and it works like a charm. Very easy to use and implement. Hats off to you :slight_smile:

30

SUPER helpful, thank you!!

1 Like