How do I make a chat where the page doesnt scroll but the repeating group does?

Hi all, Im just playing around and was wondering how to make an app that isnt scrollable but when the repeating group fills up, it scrolls only within the repeating group and not the entire page?

Any help is much appreciated!!

Here is a screenshot of my problem and below I will also show screenshots of what I currently have in my different groups Layout: As you can see, the whole screen is sort of pushed down and the repeating group has a scroll bar and the whole page, making the input bar not visible.

Here is the repeating groups parent:

Here is the actual repeating group:

Here is the Input containers parent:

Here is the actual input container:

Set fix height to your repeating group

@emilvisser2000 fixed height for your repeating group will only fix the height of the RG to some arbitrary number you set there, which at times might be greater than height of page which would be tied to user device and so may still have the scroll bar.

Instead you want to set your rg to have a fixed height of 100% so that it is always the same height as the page, but your page might have other elements on it that require the page to be scrolled such as the left side bar, so you need to do the same thing for that area as well.

However, you may have a header on the page which means the height of the RG would be the page height, but the header maybe is 60px, so the header plus rg height would make the page scroll.

To really make it work you need custom css or a plugin to set the height of the rg to be dynamic in that you use the page height minus the header height…but if you don’t have a header, or any other elements above or below the rg then you can get away with just setting rg to fixed height 100% and make the page have no max height which means it just takes up as much height as the user device is.

1 Like

I previously had the height fixed at 100% but that for some reason also didn’t work? I also have no header

Looking closely at your screen shots you are right, you do not have a header, but you do have a large group above the repeating group which is why the repeating group scroll bar happens about half way down your screen.

Large group above the repeating group

Large group under repeating group

large margins at top and bottom of element

ALL of these things are impacting the page and related element heights. If you did not have any other elements above or below the repeating group and no large margins on elements then 100% fixed height would be equal to the height of the page.

You might need to check out a plugin that can do dynamic heights and allow you to incorporate the height of the large group above the repeating group as well as the height of the large group under the repeating group and the large margins at top and bottom of other element so that everything works properly. One of those plugins that I’m a fan of is the one I created for my projects and made available for purchase on the marketplace.

I have found the solution… You have to add the repeating group and its parent group into a floating container and align it “Vertically float relative to: Both”. Dont ask me how but it works hahah. You then just have to set this floating group to 80% (or however much so that it doesnt overlap with your input bar), then you can set the rest of the groups inside that floating group to 100%.