# Grow Repeating Group to full page height - Mobile Chat **URL:** \ **Category:** Responsiveness\ **Created:** [June 17, 2020, 5:59pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643 "2020-06-17T17:59:03Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![zachenson](https://avatars.discourse-cdn.com/v4/letter/z/2bfe46/32.png) [@zachenson](https://forum.bubble.io/u/zachenson)\ **Post date:** [June 17, 2020, 5:59pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/1 "2020-06-17T17:59:03Z")
Thanks to anyone reading. I am trying to get a repeating group to fill a page no matter the height for a chat application. I attached photos of my problem. Basically the repeating group does not fill the page when the height of the page changes. Does anyone know how to do this? I have tried stretching just the repeating group to the top and bottom. I have also tried putting the repeating group inside a group and stretching that to full page. I still end up with these huge spaces based on page size. ![Screen Shot 2020-06-17 at 10.36.41 AM](https://us1.discourse-cdn.com/bubble/original/3X/9/e/9e950e6d4d1d922d3039970c4133fa7e6870e0b0.png) ![Screen Shot 2020-06-17 at 10.36.56 AM](https://us1.discourse-cdn.com/bubble/original/3X/7/6/76690c3a8b4dd3d2e7a9352b727662db6b2683e9.png) ![Screen Shot 2020-06-17 at 10.55.25 AM](https://us1.discourse-cdn.com/bubble/original/3X/4/4/4437ba23beb7450d6dd2b623d7b988382f8383eb.png) ---
**Author:** ![zachenson](https://avatars.discourse-cdn.com/v4/letter/z/2bfe46/32.png) [@zachenson](https://forum.bubble.io/u/zachenson)\ **Post date:** [June 17, 2020, 7:09pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/2 "2020-06-17T19:09:16Z")
Awesome I figured it out. Much thanks to this post. [Group responsive height](http://forum.bubble.io/t/group-responsive-height/78419/13) Below is a unified answer for reference or anyone needing to do this. 1. Install the Classify Plugin. This will add a special header to your site. 2. Add an HTML element to your page (not inside a group, it needs to sit on the page itself) 3. Use the below code for the HTML Element. You will need to wrap it in a style tag. .card-group { width: 100vw !important; height: 200vw !important; } 4. Place your repeating group inside of a normal group. 1. Add this to the ID of the Outside Group. (If you do not have ID’s enabled enable it in Bubble settings) {addClass: “card-group”} - include the “{}” in your ID tag. 2. Add this to the ID of the Repeating Group. {addClass: “sim-group”}bgvfyg Boom your groups should go full viewport. You can view @boston85719 Bubble here. [https://bubble.io/page?type=page&name=fixed\_ratio&id=testfullheightj&tab=tabs-1](https://bubble.io/page?type=page&name=fixed_ratio&id=testfullheightj&tab=tabs-1) ---
**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:** [June 17, 2020, 7:25pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/3 "2020-06-17T19:25:44Z")
> [@zachenson](#): > > .card-group .sim-group { > width: 100vw !important; > height: 200vw !important; > top: calc(0vw - 0px) !important; > left: calc(0vw - 0px) !important; Your height should not be 200% of the viewport width. That is what 200vw is. You should set your height to 100% of the viewport height. That would be 100vh I had an issue a couple a weeks ago setting something up for height not realizing I was using vw (widht) instead of vh (height). ---
**Author:** ![philledille](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/philledille/32/6558_2.png) [@philledille](https://forum.bubble.io/u/philledille)\ **Post date:** [October 3, 2020, 12:28pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/4 "2020-10-03T12:28:29Z")
I successfully got my Repeating group (RG) inside a Group to expand as you show. Thnx! But, when the RG’s height is increased it shows only one more row than I have set up in the editor. I want the RG to fill the new height with as many rows as possible and the be scrollable. What am I missing? _Use case: I want 2 or more RGs next to each other all occupying max possible height (screen height minus some navigation) and each should be individually scrollable._ **Editor:** ![Screenshot 2020-10-03 at 14.25.44](https://us1.discourse-cdn.com/bubble/original/3X/2/8/283528ce270c00368e70a58365a175389d8763b9.png) **Preview:** ![Screenshot 2020-10-03 at 14.25.56](https://us1.discourse-cdn.com/bubble/original/3X/5/e/5ee5e033c788611af0d7024384bae49c7cff290b.png) ---
**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:** [October 3, 2020, 3:44pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/5 "2020-10-03T15:44:16Z")
> [@philledille](#): > > What am I missing? Looks like data is missing ---
**Author:** ![philledille](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/philledille/32/6558_2.png) [@philledille](https://forum.bubble.io/u/philledille)\ **Post date:** [October 3, 2020, 3:54pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/6 "2020-10-03T15:54:44Z")
Unfortunately no (the DB contains 67 rows and I load them all, no privacy rules). As soon as I remove the “{addClass: “sim-group”}” from the ID all data is displayed correctly. Most interesting is that the RG after using the “{addClass: “sim-group”}” show number of rows set up in the editor **plus one** (regardless of how many I’ve set up in the editor). Or is there a better way altogether imitating Slack’s double lists that is separately scrollable and extend to the bottom of the screen regardless of the screen’s height: ![Screenshot 2020-10-03 at 17.59.38](https://us1.discourse-cdn.com/bubble/original/3X/b/5/b50a052c63387a640071c7f86c3327b06508ff41.png) ---
**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:** [October 3, 2020, 4:31pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/7 "2020-10-03T16:31:54Z")
Not sure what to do here. I’ve never tried to make a RG the full height of the page using the method I provided…only used it for a group element. You could try to make the RG Full list and see if that works. If not you could see if making it full list and removing the code and only have the container group have the code and make the container group the same height as the RG in the editor and see if the RG naturally expands to fill the entire container group. Lots and lots of different ideas come to mind of how to possibly resolve it…all would take hours to implement and test. ---
**Author:** ![nomorecode](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nomorecode/32/87996_2.png) [@nomorecode](https://forum.bubble.io/u/nomorecode)\ **Post date:** [October 3, 2020, 4:41pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/8 "2020-10-03T16:41:16Z")
Is this what you mean - here I have numerous repeating groups nested, expanded and responding to all screen sizes from 320-4400px ![Screenshot 2020-10-03 at 17.39.19](https://us1.discourse-cdn.com/bubble/original/3X/d/4/d491dffa6fe784e38220571ef567a545aa1174a2.jpeg) ---
**Author:** ![philledille](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/philledille/32/6558_2.png) [@philledille](https://forum.bubble.io/u/philledille)\ **Post date:** [October 3, 2020, 4:44pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/9 "2020-10-03T16:44:28Z")
Thanks for your thoughts on this. I tried your Full list idea, but no luck there. Just you saying that you have lots of ideas (which is brilliant and needed in Bubble 💪🏻) makes me think that this use case, to my surprise, is unique. Could that really be so? PS. I’ve also tried the Hero Sizing with the same (lack of) result. ---
**Author:** ![philledille](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/philledille/32/6558_2.png) [@philledille](https://forum.bubble.io/u/philledille)\ **Post date:** [October 3, 2020, 4:45pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/10 "2020-10-03T16:45:19Z")
Yes! Please enlighten me! ---
**Author:** ![philledille](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/philledille/32/6558_2.png) [@philledille](https://forum.bubble.io/u/philledille)\ **Post date:** [October 3, 2020, 4:46pm UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/11 "2020-10-03T16:46:52Z")
iFrames in combination with Classify works! Feels a bit crude. Maybe there’s a smoother way? ---
**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:** [October 7, 2020, 9:15am UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/12 "2020-10-07T09:15:23Z")
hey @philledille struggling with the responsive RG height problem as you. Did you found any solution? ---
**Author:** ![philledille](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/philledille/32/6558_2.png) [@philledille](https://forum.bubble.io/u/philledille)\ **Post date:** [October 7, 2020, 10:09am UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/13 "2020-10-07T10:09:25Z")
Depends on your circumstances. Here are some options: [🔥 Classify: A tiny plugin that brings CSS power to Bubble](http://forum.bubble.io/t/classify-a-tiny-plugin-that-brings-css-power-to-bubble/67741/72) ---
**Author:** ![philledille](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/philledille/32/6558_2.png) [@philledille](https://forum.bubble.io/u/philledille)\ **Post date:** [October 13, 2020, 8:29am UTC](https://forum.bubble.io/t/grow-repeating-group-to-full-page-height-mobile-chat/97643/14 "2020-10-13T08:29:25Z")
> [@Using Floating groups to get responsive height for Repeating groups](http://forum.bubble.io/t/using-floating-groups-to-get-responsive-height-for-repeating-groups/115950): > > I’m just back from the responsive trenches implementing separate scrolling RGs using several floating groups (FG). Key findings: Having two FGs, one of them need to be fixed width so the FGs don’t expand over each other, when the page is stretched. The whole screen width will be used so the rest of the page design will need to use that as well to look good. I initially had a design where I used the center 800 px if the screen was wider. I experimented with putting groups into the FGs to put th…