How to place footer always at bottom of page view

Printed From: openElement Website
Category:

openElement

Forum Name: openElement General Discussion
Forum Description: A place for general discussion and questions about the software.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=1856
Printed Date: Apr 20 2024 at 11:31am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: How to place footer always at bottom of page view

Posted By: TC2020
Subject: How to place footer always at bottom of page view
Date Posted: Jul 21 2021 at 10:34pm

Hi,

I would like to know how to set footer properties such that it is always visible at the bottom of the browser.

On my page, I inserted a group of elements container inside its footer. This container has some text (e.g. notices) and background color. I would like to have this displayed at the bottom of the browser so viewers can always see it instead of having to scroll down to the end of the page.

If the above is not easily done by setting properties and requires some advanced coding, then is there a way to auto attach this footer to the end of the page contents?. Right now my footer is either far below the last content of the page (i.e. large white space in between the two); or it is above the bottom of the browser when the page has less contents/ short (i.e. all contents displayed in less a page view).

At the moment, I manually adjust the position of this footer by moving it up or down at the bottom according to the page contents. This does not seem like the right way of doing it and also it is not WYSIWYG in browser view.

Thank you.

Replies:

Posted By: Hobby001
Date Posted: Jul 21 2021 at 11:57pm

Try this one:

Create a new blank project
Open the base layer

Page tab, responsive, 100% width
Page tab, responsive, Page Sections

Main

Position... Relative (like...
Size auto checked

Bottom

Position... Relative (like...
Size auto checked

Fill the footer section with some stuff

Open home page

Make sure that base layer is attached
Fill the content section with some info, you will see that the footer follows the content.

That is good as long as your page fills any type of screen.

If you want your footer to be placed at the bottom of screen unless the page is longer than the screen, go back to the base layer.

Add a new javascript source code block at bottom of page
Fill it with the following code:

function fullScreenMinimum(){
$('.OESZ_XBodyContent').css({'min-height':$(window).height()-$('.OESZ_XBodyFooter').height()});
}

$(document).ready(
function(){
fullScreenMinimum();
}
);

$(window).resize(
function(){
fullScreenMinimum();
}
);

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video

Posted By: TC2020
Date Posted: Jul 22 2021 at 6:33pm

With step 1,2 and 3 only, the footer follows the page but not at the bottom when the page is short. With Javascript added, the footer is at the bottom with the same page length.

This works for me and I will apply this to my pages.

It's great to have a teacher around and thanks.

Posted By: Hobby001
Date Posted: Jul 22 2021 at 6:52pm

I guess that I should make a training video and add it to my play list.

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video

Posted By: TC2020
Date Posted: Jul 22 2021 at 8:19pm

Training videos on various topics/features would greatly help, especially someone like me using OE for the first time. I had gone through your videos and others but not many out there.

The challenges I have so far in using OE deal with setting properties for elements and placement (which relates to absolute and relative modes).

For properties, there seem to be many places that make you think you can set them but the outcome may not be what you want. An example of this is text properties. The outcome depends on what being clicked on and where the changes are made. A short tutorial showing a general concept of how OE works to get consistent outcome would be great.

For placement, I guess it is case/design specific but a video on general concept on how to place elements at specific locations and relative to each other would be great. In this case, think of a dashboard design having various shapes and sizes but elements need to be at their suitable places, such as logical groupings.

Again, thanks a lot for your time.

Posted By: Hobby001
Date Posted: Jul 31 2021 at 12:21am

I just finish the french version of the tutorial

https://forum.openelement.com/fr/forum_posts.asp?TID=24106&PID=164523&title=crer-un-bas-de-page-standard#164523" rel="nofollow - https://forum.openelement.com/fr/forum_posts.asp?TID=24106&PID=164523&title=crer-un-bas-de-page-standard#164523

Note that there is a change to the js code in order to take the header and the footer size.

English version to follow soon