Forum Academy Marketplace Showcase Pricing Features

Best position for footer

The default position for the footer in a new app is 1166 px. I notice that sometimes it moves up slightly to fill empty space, but still leaves a significant amount (3-4 inches) of white space when I add any element to the page. If I delete all elements, it moves all the way up to the header (which I want). If I move it up to close extra white space, something still pushes that footer down, even with everything set to collapse when hidden.

Also, if I move it up too much, some elements slip below the footer and it looks bad.

Is there a better way to control the position of the footer? I just want it to move to just below the last content on the page.

What you’re probably looking for is a group in between the header and footer with all the other content on the page within that group. When everything is hidden the group should collapse and the footer would be touching the header. Haven’t tested that, but give it a shot and see if it works.

2 Likes

That seems to be it. Thanks!

I added the elements to a main group just floating in the center of the page and nothing changed. Then I extended the top of the group to touch the header and the bottom of the group to touch the footer and it now works like I expected!

FYI:
To confirm this, I moved the footer down 200px. Bad again. Then I made the height of the group 200px larger. Bad again. I had a different group hidden so when I extended that down to touch the footer, all was good again.

The only issue now is that although the group hides and the footer moves up, when the group is visible, it keeps dead white space in it’s height even if the elements inside are hidden and collapsed.

So I seem to have two choices:

  1. Add a master group element that touches the header and footer. When I do that, if there are not enough elements in the group to fill the height, the footer remains too far down - leaving white space.

  2. Don’t use a master group element - then the footer doesn’t move up when I hide any element that is between the header and footer.

Something else you can try that’s a bit hacky is placing a shape element along the hight of the page (inside the main group in Option 1 above). Just make it tall and narrow, and then set it to transparent and push it to the back. That way when the elements in the group are hidden the main group will keep it’s same height, and it will only shrink when you hide the whole group. I’d always use this as a last resort, though, because it can have some unintended affects on some of the other elements on the page.

1 Like