CODEWITHSUNDEEP
cssvaadinvaadin10vaadin-flow
Tyvain
Tyvain

Reputation: 2760

Vaadin: display RouterLink view between header and footer

I have this simple layout:

@StyleSheet("frontend://styles.css")
@Route("")
public class MainView extends Main implements RouterLayout {
    private static final long serialVersionUID = 1L;
    public MainView(@Value("${env}") String env, @Autowired BuildProperties buildProperties) {
        HeaderComponent header = new HeaderComponent(env, Application.APP_NAME, buildProperties.getVersion());
        FooterComponent footer = new FooterComponent(env, buildProperties.getVersion())
        add(header, footer);
    }
}

On top a Header, on bottom a Footer.

Between I want to add this view:

@Route(layout = MainView.class, value = "secured/ue")
public class UEView extends Article {
// many stuff
}

This view is display when I click on a link (or when I use theroute 'secured/ue'):

The problem is that the UE view is displayed after the 'footer'.

I try to use css to solve this but it doesn't work:

main{
display: grid;
grid-template-areas:
"header"
"article"
"footer";
}

How can I do that ? display the view between the header and the footer ??

Upvotes: 2

Views: 280

Answers (1)

Tatu Lund
Tatu Lund

Reputation: 10643

You need a placeholder for your article in your main view, e.g. like below the Div contentArea. And in addition to that you need to override the showRouterLayoutContent(..) method. 

@Route("")
public class MainView extends Main implements RouterLayout {
    private Div contentArea = new Div();

    public MainView(@Value("${env}") String env, @Autowired BuildProperties buildProperties) {
        HeaderComponent header = new HeaderComponent(env, Application.APP_NAME, buildProperties.getVersion());
        FooterComponent footer = new FooterComponent(env, buildProperties.getVersion())
        add(header, contentArea, footer);
    }

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

}

Upvotes: 3

Related Questions