Hi guys,
Some ketchup, please!
I’m trying to include chips in my app using a repeating group.
Not sure if this is the best way to do it.
How can I style this:
to this:
I need to adjust each chip’s width to wrap around the text.
Thanks.
2 Likes
You can’t.
The only way to do it for know is by counting the number of characters in a word and depending on the count show elements using conditionals, but it will not get you a responsive repeating group.
or use custom code:
If the use case is specifically just tags (apparently a.k.a. chips!), you can use a disabled multiple dropdown element (install Bubble’s multi dropdown plugin to get the element) to easily display variable width tags.
Otherwise you can follow the AirDev approach in the linked thread above.
Neither is perfect, but either might work for you.
2 Likes
I had a look at this. Was playing before with CSS and managed to get the same effect - resizing the tag to fit the text. My problem now is how to style the repeating divs to also resize and wrap around the tags.
Thanks edd,
Had a look at this. I will most probably use it when editing or creating a new record. But how do I display the selected tags when only viewing the record?
Take a look:
This is really perfect! Anyone needing tags/chips and much more should consider this plugin.
Only thing, this is an experimental app I’m building to learn to use bubble and it is a bit pricey just for that.
1 Like
In the element properties pane just check the “This input is disabled” box, and you can display tags like this:
2 Likes
Thanks for coming back. This is what I have:
And this is how it is looking:
I must be doing something wrong!
I also tried this and get nothing in the field:
Fill in the “Option caption” section — that’s the label you want to display. The above section the source of the label, but you still need to tell it what field to display. In your case since your source is a text you’ll probably just end up with “Current Option” as the value in the “Option caption” section.
1 Like
Thanks again.
Had to fill out the Default value as well for it too work!
With some styling here it is:
Can I make them clickable so that I send user to a listing of recipes containing that tag?
Many thanks once again.
1 Like
As far as I know you cannot make each tag clickable in this element. Like I said, not a perfect solution.
True. Thanks anyway. I’ll definitely will need this when inputting the record.
For anyone wanting a custom solution that doesn’t require a paid plugin (just the toolbox plugin). The chips can be clickable. Editor.
8 Likes
Thank you for this!! Really helped!
1 Like
Hello there,
I’m trying to use this functionality and everything works well, but I’m trying to show every chip / label with a hexcode color previously chosen by the user (Trello labels’ style). Do you know if there is any way to custom this html in order to get a different color per chip? Using dynamic content in the background line is not helping, it applies the same color to the whole chips group altought they have different hex codes fixed in database.
Thanks in advance!
hey @andy.i nice trick!
I can’t do it work with option set. I think it is because there’s no unique id in OS, so I don’t know what to refer there :
Do you have an idea what I need to do ?
Thank you
Hey @Sarah_Esteve, use the option set “Display”. That should do it!
1 Like
