Footer at the bottom of the page

[ben]

The following How to guide is very messy, for new users in particular.

Push Footer to bottom of viewport

With this example, I will show how to create a footer which stays at the bottom of the viewport unless the page content pushes it further. We start with a page that contains the normal ingredients: [image] Right-click App and from the dialog, choose Blocks, Navigation and a navigation structure of your choice. For this example, we have chosen Brand Menu. [image] Right-click Header, choose to add component after, stay with Suggested and add the Main element. [image] To add the Foote…

There is an easy Bootstrap way of accomplishing this. All that is required is to add Bootstrap classes to three lines of code.

The problem is, that in Wappler there is no easy and intuitive way to accomplish this. For the HTML and BODY tags, we need to go to the DOM panel where there is no prompt for the required Bootstrap classes.

In App Structure there is also no suggestion on how to grow the MAIN element.

If I may be so bold as to make a suggestion:

1. have the h-100 class automatically applied to the HTML and BODY tags for Bootstrap documents.
2. have the ability to change the body element into a flex container together with the flex direction.
3. be able to apply flex-grow to an element when the body is a flex container.

[steen]

Any news on this issue ???

I`ve been following the tutorial from ben regarding to get the Footer at the bottom of the page

Cant get it to work, and its NOT a browser issue.

[Robert_LM]

Ben,
thanks for this.
I too had found the “messy” solution and noticed a link here inside that post. Much simpler indeed.
But I’m wondering if there’s a way to have a “sticky” footer, rather than one that gets pushed down by content?
Live link: http://vehicles.lakemirrorcarshow.com/

Once you go off the main page, like the “Concours” menu item, you’ll see the footer pushed to the very bottom of the content.
But what if I wanted to have a banner ad or some other notice at the bottom of the viewport always visible with content in a scrolling region above it?
Think there’s an easy bootstrap way to do that?

Thx

[Teodor]

You can use class="fixed-bottom" to make an element stick to the bottom:

Position

[Sorry_Duh]

Little off topic but just a little suggestion you may want to look into the structure of your header and footer too, I say this because in the header for example you have a row inside the header with no container before this row (same with the footer).

This creates an issue with the width of your page been over 100% wide unless you either put this row inside a container (could also likely then remove the one you added to the navbar optional)

Or on the row add a class of gx-0 as this will remove the negative margins and stop the page going up in width.

Example of what im talking about when I hover the rows notice the width:
Top nav is your current nav the one below was one I adjusted so you could see the difference

Screen Recording 2022-10-24 at 21.18.48

This was just to make sure you was aware so you don’t randomly see it on a page and start wondering why its happening

[Robert_LM]

I just noticed that earlier today. on the footer (since I was playing around with this thread) I noticed that because the footer was in a container (I had originally added it using the UI Block element) it had some significant left padding. I didn’t really want that and removed the container and it moved my text over to the left edge… which was better. Once I published I noticed the “wobble” (I call it) from the page being just a few pixels too wide and now causing a horizontal scroll bar.
So, its good timing on your comment. I’ll re-visit that. Thanks!

EDIT: Got it cleaned up. Thx for the tip.

[Robert_LM]

yes, that was easy. I forgot how nice they’ve made this now. Thx!!!