Layout with custom app bar, sidebar and footer using View Containers

[oyvind.byhring]

I’m having some trouble setting up my UI to behave how I want it, and was hoping someone here could help me figure it out.

Our app has a custom app bar and side bar, a view container for the main content (the part with a peach colored background in the screenshots), and a footer that should be placed below the main content. This picture shows how we want it to look when the main content is shorter than the window height:

… and when the main content is too tall, we want to scroll it like this:

I’ve been able to make this design work using a container for the main content, but when I try to swap it out for a View Container, this happens:

This is how I’ve set things up in Create:

The hidden container is the one that gives me the desired result, and is set up like this:

… but applying the same values for flex grow and shrink on the view container doesn’t help.

[ErikAKSkallevold]

Hi,

This is possible with some modifications.
The view container is rendered with posistion: absolute, and is therefore not part of the regular layout flow. It will therefore not affect the posistion of other elements on the page.

One solution that worked for me, was to convert the footer to a Shareable Component, and move it into the view that is rendered by the View Container.

The setup of the body and view container in the main view:

The setup in the view that with the footer and iterating container:

The footer is just a simple shareable component:

The result is something like this:

(Excuse the poor test data )

This isn´t quite the same that you had setup, but it should still be re-useable if the footer is a Shareable Component.

// Erik