# RG cell width responsive

**URL:** <https://forum.bubble.io/t/rg-cell-width-responsive/84808>\
**Category:** Questions\
**Created:** [April 4, 2020, 7:14am UTC](https://forum.bubble.io/t/rg-cell-width-responsive/84808 "2020-04-04T07:14:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\
**Post date:** [April 4, 2020, 7:14am UTC](https://forum.bubble.io/t/rg-cell-width-responsive/84808/1 "2020-04-04T07:14:11Z")

</div>

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](https://us1.discourse-cdn.com/bubble/original/3X/5/c/5c23242c056e427e344238ba7e55ee157dc8eb23.png)

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](https://us1.discourse-cdn.com/bubble/original/3X/5/a/5a29d92f89057c585f69b050a74989cfd42c2cf5.png)

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?

---

<div class="post-metadata">

**Author:** ![MattG](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mattg/32/61722_2.png) [@MattG](https://forum.bubble.io/u/MattG)\
**Post date:** [May 21, 2020, 2:15pm UTC](https://forum.bubble.io/t/rg-cell-width-responsive/84808/2 "2020-05-21T14:15:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bartek.dev](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bartek.dev/32/50610_2.png) [@bartek.dev](https://forum.bubble.io/u/bartek.dev)\
**Post date:** [May 21, 2020, 4:07pm UTC](https://forum.bubble.io/t/rg-cell-width-responsive/84808/3 "2020-05-21T16:07:37Z")

</div>

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](https://picloud-mdui-landing.bubbleapps.io/chips_textlist)

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

---

<div class="post-metadata">

**Author:** ![studio.purracchio](https://avatars.discourse-cdn.com/v4/letter/s/7ba0ec/32.png) [@studio.purracchio](https://forum.bubble.io/u/studio.purracchio)\
**Post date:** [May 21, 2020, 4:28pm UTC](https://forum.bubble.io/t/rg-cell-width-responsive/84808/4 "2020-05-21T16:28:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\
**Post date:** [May 21, 2020, 5:46pm UTC](https://forum.bubble.io/t/rg-cell-width-responsive/84808/5 "2020-05-21T17:46:19Z")

</div>

> [@Tip: Converting simple list output to tag-like element](http://forum.bubble.io/t/tip-converting-simple-list-output-to-tag-like-element/78302):
>
> Tl ;dr. Get a nice looking list output, rather than the normal commas or line breaks. 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…

---

<div class="post-metadata">

**Author:** ![MattG](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mattg/32/61722_2.png) [@MattG](https://forum.bubble.io/u/MattG)\
**Post date:** [May 22, 2020, 12:19pm UTC](https://forum.bubble.io/t/rg-cell-width-responsive/84808/6 "2020-05-22T12:19:02Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![aj11](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/aj11/32/118613_2.png) [@aj11](https://forum.bubble.io/u/aj11)\
**Post date:** [January 20, 2022, 7:34pm UTC](https://forum.bubble.io/t/rg-cell-width-responsive/84808/7 "2022-01-20T19:34:02Z")

</div>

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](https://us1.discourse-cdn.com/bubble/original/3X/e/7/e7e33519c09d32833d5b4047c8a16c81a1647613.png)

I created a sample app to demonstrate:

Here is a link to a demo page: [Bubble | No-code apps](https://rg-chips-tags-demo.bubbleapps.io/version-test)

Here is a link to the editor: [Rg-chips-tags-demo | Bubble Editor](https://bubble.io/page?name=index&id=rg-chips-tags-demo&tab=tabs-1)

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!

---

<div class="post-metadata">

**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\
**Post date:** [January 21, 2022, 3:45am UTC](https://forum.bubble.io/t/rg-cell-width-responsive/84808/8 "2022-01-21T03:45:01Z")

</div>

Can do it with HTML and get better control over design

> **[Category/Topic Tags | NoCode Trainer](https://nocodetrainer.com/tutorial/categorytopic-tags)**
>
> Guide to creating clickable tags capable of color changes and dynamic colors based on tag value. | 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.
