Struggling with page height in responsive engine

Hi everyone!

I’m struggling with a quite simple layout and cannot get it working. If anyone could guide me in the right direction, that would be appreciated.

I want to create a layout like this:

areas

Scrollable areas will be displaying repeating groups with data. I tried floating groups, all kinds of regular groups (rows, columns, mixed) but to no result. It’s either a not-scrollable RG that takes much more space than it should or a complete screen scrolling (with header and footer).

Could you please share the approach that you’d take when creating a layout like this? I want to keep the design clean and free from extra scrollbars, 100% vl height all the time.

Any ideas?

Here is an example:

Here is the editor:

I hope this is what you are looking for. I just made the Repeating Groups ‘fixed’.

That looks slick, awesome, thank you very much!

The only issue is that it’s displayed with lots of whitespace around, not full-screen

Is there a way to achieve the same so that the whole page takes 100% of the screen?

Many thanks for your help!

1 Like

I made it a little better, but I see your point. It is hard to make a scrollable repeating group to have a responsive size without breaking out of its parent container.

Actually, I think I just figured it out. Make sure to uncheck ‘fit height to content’ on every group that would be able to be stretched by the repeating group. Then also give each of those groups a max height of 100% which means it will never stretch outside of its parent container

1 Like

Cool, looks much closer to what I need now. I will check your editor settings, many thanks for your time!