With one-page apps, how do you get past the page length?

So when making a single-page app, I haven’t figured out how to get the page not to be as tall as the tallest element. Sure, I know how make it so that when it’s invisible it’s height is collapsed, and I see that it works - content below it moves up. Besides that, the page is still just as long so there’s a bunch of blank space at the bottom. Is there a way to get around that?

If you stack all the groups on top of each other, instead of having them occupy the same space, the page will be mega long in the editor, but only as long as the displayed group (or the monitor) when in preview or live.

Wow, I can’t believe I never thought to try that. But that also would make organization a real nightmare. My app has probably 50 different “pages”, and I often go back and change the length of certain ones as I change things. That would mean I’d have to make potentially 49 pages visible and move them all down when the length changes.

Yep, you’re right about that. It sucks.

@josh4 Yes, vertically stacking becomes really time-consuming and messy with a lot of groups. One alternative is to change the container of each group ‘page’ to be floating groups (set to float:nothing), stack the on top of each other, and then place a regular collapsible group beneath them, that collapses in height on page load. Here is a more detailed explanation on setting it up:

2 Likes