Footer won't automatically adjust position accurately

Wappler General How To
#1

Hi, When I first started wappler I could not get the footer to stay at the bottom of the page. This forum helped me out on that.
Now a slighty more subtle problem.

On my page I have footers positioned correctly…

image
image717×505 27.4 KB

But if I adjust the page in any way, ie change some text boxes into text areas, causing the page to be deeper, the footers will not float down to accommodate the deeper page.

image
image708×526 25.3 KB

How do i get the footers to move down automatically?

#2

Hello Bruce,
Please provide a link to your page where we can check what you are doing with the footer :slight_smile:
This cannot be debugged by just looking at the screenshots.

#3

Hi Teodor, thank you in advance for having a look.

The url directly to the page is
https://www.marama-cloud.com/appSurveys/needs_assessment_test.php

I have removed all security off the page and off the api’s that it needs, you should be able to go straight in.

#4

So how do you need your footer to work - when the content is short, push the footer to the bottom, and when there is long content, then the content should push the footer down? Is that correct?

I see many weird styles applied by you using the design panel … such as:

.style424 {
    min-height: 1200px;
    max-height: 1200px;
}

applied to the main element. Makes no sense to have min and max height using the same value. Just remove this.

.style104 {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 20px;
    background-image: linear-gradient(178deg, #6610f2 0%, #3d818f 100%, white 100%);
    text-align: left;
    min-height: 1500px;
    max-height: 1500px;
}

applied to this left column:

<div class="style104 text-warning bg-light text-xl-left w-auto col-xl-1 col-lg-1 col-md-1 text-sm-left d-none d-md-block col-sm col-1 ml-xl-n5 mr-xl-3 h-auto" id="colLeftSide">

which also has thee min and max height applied the same way, which is also wrong. Also remove these from there.

Then your footer will behave properly.

#5

I also notice a lot of weird stylings applied to many other elements on this page, as if you just randomly added some styles in the design panel and just left them there … random class names as well.
You should really check your page structure and styles.

#6

Thanks Teodor, the styles still have me mystified as to how they really work, they seem to generate new style numbers every time I adjust something in ‘Design’ on the app side. I tried a lot of things to adjust the height of elements within the page, to force the footer down, which did improve things, but not to perfection. I will go over your advice and see what happens, thanks.

#7

Well, that is because you don’t add a class name :slight_smile: as explained in the docs: