RG cell width responsive

Questions
1

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

Screen Shot 2020-04-04 at 2.26.19 PM
Screen Shot 2020-04-04 at 2.26.19 PM995×355 31.8 KB

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

Screen Shot 2020-04-04 at 2.32.57 PM
Screen Shot 2020-04-04 at 2.32.57 PM1063×203 27.3 KB

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?

1 Like
2

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

3

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)

4

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

1 Like
5
6

Thanks!

7

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!

8

Can do it with HTML and get better control over design

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.