Just a head up, you can pretty easily get this functionality with Bubble RGs and Text Elements. See example below.
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:
-
Make your RG Full List with 1 row and 1 column.
-
Deselect “This repeating group has a fixed width” and select “Allow more than one column when stretched”.
-
Add an ID Attribute to the RG (I’m using “tag_rg” as my id).
-
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.
-
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>
- Tweak padding as desired.
Hope this helps everyone!