AppLayout with Footer on all Pages

Flow
1

Hey Deers,

does anyone has an idea how i can add a footer to every view which uses my Main Applayout?

Currently i need to add it on every View manually to the bottom of the page. I hope there is a smarter solution

2

Different solutions:

  • AppLayout implements RouterLayout - meaning you can overwrite showRouterLayoutContent and do anything you want. Like adding the incoming view to a layout of choice

  • AppLayout has a setContent method which you can use and overwrite. In the constructor create your outer layout + footer and use super.setContent and store your layout. In the overwritten setContent method just remove the first element which is not your footer and re-add the new element coming from the method parameters

3

Thanks Christian! First idea was working directly

4

@knoobie the only issue i have is, that the footer stuck below the content. it will not be pushed all the way down to the buttom. Do you have any idea?

public class MainLayout extends VerticalLayout implements RouterLayout {
    private Div childWrapper = new Div();
    Span footer = new Span("Footer");

    public  MainLayout() {
        setSizeFull();
        Span header = new Span("Header");
        add(header);
        addAndExpand(childWrapper);
        add(footer);
    }

    @Override
    public void showRouterLayoutContent(HasElement content) {
        childWrapper.getElement().appendChild(content.getElement());
        childWrapper.add(footer); //need to add it otherwise its not visible
    }
}
5

Not sure why you always add the footer… instead of doing it once :sweat_smile: and adding the other content first.

But to your problem: make your wrapper display: flex and add flex grow 1 to your view

6

i added the footer in constructor, right?

but when i only use

@Override
    public void showRouterLayoutContent(HasElement content) {
        childWrapper.getElement().appendChild(content.getElement());
       
    }

The footer will not be displayed. And addAndExpand() already set flex-grow to 1
i dont get it

7

Hmm… Just looking at the code it should work without adding the footer to the wrapper - it should have been already on the page… might be out of sight because it’s a inline span element?

8

Damn you are genius! holy cow. Changing the wrapper from div to VerticalLayout worked!

Thank you very much!!

1 Like