RG cell width responsive

[boston85719]

Is there any way to get the RG cell width to stretch to fit a text…For example something like this

As some of the flavors have a longer text than others it would be nice to get a more responsive effect based on the text length.

At the moment the only thing I get is this

So in the above screen shot I’d prefer to have ‘blue cheese’ keep the same height but change the width and just cause the RG to have rows with different number of columns .

Is this at all possible?

[MattG]

I’m looking for the same. @boston85719, were you able to find a way to do this?

[bartek.dev]

I know of two ways:

1. Using Multiselect dropdown plugin and disabling the input. (slow on the page load though)

2. Material design plugin by @studio.purracchio https://picloud-mdui-landing.bubbleapps.io/chips_textlist

I think both methods cannot create clickable tags. (1st one for sure)

[studio.purracchio]

Hi guys,
I’m still working for Action Chips (clickable chips)

[boston85719]

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. [skill1] 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 woul…

[MattG]

Thanks!

[aj11]

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:

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>

6. Tweak padding as desired.

Hope this helps everyone!

[boston85719]

Can do it with HTML and get better control over design

Category/Topic Tags | NoCode Trainer

The new responsive engine makes it even easier and would use the repeating group with other elements which is better than HTML method as it is easier to control conditionals and trigger workflows. Plus can have more than just text such as images or icons being contained in the tag.