SOLVED: How to adjust the page height?

I have a large form inside a container which is collapsed about 50% by default. The form expands and collapses depending on certain selections. The expansion process works great because it also expands the page height and pushes down the footer. It is working fantastic.

The problem I have is when the form is collapsed:

Because of the form/container is collapsed by default during the loading, the page height won’t shrinks or collapses along with the form/container. The page height remains with the same size I set during the design, which shows a large empty void below the form/container.

Is there a way to adjust the Page Height programately?

Thank you
-Luigi

1 Like

I just found a workaround, it doesn’t make any sense to me at all, but it works.

Before I start working with a new page, I manually expand the page height to give me enough area to start inserting the objects I’m going to work with. I drag the footer way down to expand the page height.

Now, in this scenario, I have just one big container that holds all of the object in my form, so I went ahead and CUT the whole container (no objects left on the page, just header and footer) and then manually proceeded to drag up the Footer all the way up until it won’t go up any further.

Then, I PASTED the container back again… As I expected, the container pushed the footer down to make room for it, so I have my page back along with all it components as I was before.

WHAT’S THE DIFFERENCE?
Well, when I collapse the container now, the whole page collapses with it, dragging the footer up with it… PROBLEM SOLVED!!! No big empty space between the Footer and the bottom of the container anymore.

CONCLUSION?
Do not DRAG the footer down to make room for your objects, instead let the objects make room as they are being inserted in the page. At least do this if you are going to work with collapsible objects.

I am encountering the same exact issue.

Did you find your form and objects were “sticky” using your solution or does it have to be a container object?

Or as long as your object (when pasted in and dragged down to expand the footer) is sitting flush with the footer?

Hi Ken,
The thing is, when you drag manually the footer down to expand your page height, the height remains permanently fixed. That’s the “issue” when you work with collapsible containers.

For instance, if you have a collapsible container at the bottom of the page (just above the footer), when you collapse the container, you will see a big empty space below. This is because the page won’t collapse along with the container, its height remains fixed.

If you want the page’s height to be readjusted automatically when you collapse the containers, DO NOT expand your page height manually by dragging the footer down.

If you already did that (like most of us probably did), the only solution is to remove all of the objects in the page (CUT them all). Once the page is empty, go ahead and drag the footer all the way up, and then PASTE the objects back. Or create a new page and pate the object. in it.

As a rule, let the objects push the footer down as you insert them in the page, don’t make space manually. By doing so, the page’s height will be readjusted automatically when you collapse the containers in it.

Now, regarding your question,
Sometimes, all of the objects inside a container react to the collapse event, but one is left behind. This is because of 2 causes:

ONE: The object is over the container but is not ATTACHED to it. Move it out from the container and drag it back in again until you see the “ATTACH HERE” message.

TWO: You are not following the 70 Pixels Rule, please click on the link below:

I hope this helps,
-Luigi

@Luigi

Thank you for saving me :wink:

Code Queen loves you!!!

Hey guys!! I just had the same problem! but it was with a few texts on the mobile version. I tried what Luigino said, but it didn’t work. Luigino still gave me the solution though lol He gave me an idea, and I started to just copy one text and delete it on the desktop version to see which one was the problem. After a few I found the one text that was causing the problem. I copied what the text said/deleted it/added a new text/and pasted it. The problem went away!!

Thanks Luigino!!!

I’ve had the same issue, and was thrilled when I found this fix… but, then it didn’t work for me :frowning:

It does work to the point where the footer is no longer a mile down the page with all the white space. However, my collapsed sections no longer expand. Everything worked fine before the change, but getting that footer to cooperate somehow messed with my code. Has that happened for anyone else? Is there a solution for that?

Wow that totally worked - the bit about removing all the assets, then creating a new page and putting them all back in again - amazing!! Thank you clever forum people, v much appreciated :slight_smile:

@Luigi … Thank you very much for providing me the solution to this issue !!!

I came across the same problem. The solution is to delete your code and type it again for the collapsing items. This shouldn’t be too much code since its just your collapsing. Hope this works for you :).

Thank you, that worked. I’m so happy because I couldn’t let my page stays like that. I hope that they’ll fix it soon so we can do it properly instead of doing it manually (I didn’t find the information if they already did).

Some of the code for the collapsible element didn’t transfer after I copied and pasted it : the events onClick in the propreties. So I had to add it back. But it fixed the problem.