Grow Repeating Group to full page height - Mobile Chat

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.

Awesome I figured it out. Much thanks to this post. Group responsive height 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;
    }

    .card-group .sim-group {
    width: 100vw !important;
    height: 200vw !important;
    top: calc(0vw - 0px) !important;
    left: calc(0vw - 0px) !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

2 Likes

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).

1 Like

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:

Preview:

Looks like data is missing

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:

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.

Is this what you mean - here I have numerous repeating groups nested, expanded and responding to all screen sizes from 320-4400px

1 Like

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 :muscle:t2:) 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.

Yes! Please enlighten me!

iFrames in combination with Classify works! Feels a bit crude. Maybe there’s a smoother way?

hey @philledille

struggling with the responsive RG height problem as you. Did you found any solution?

Depends on your circumstances. Here are some options: 🔥 Classify: A tiny plugin that brings CSS power to Bubble

1 Like