The screen consists of 3 areas:
- The top container (Header).
- The content container.
- The bottom sidebar (Footer).
The width of the sidebars is a percentage of the screen width. This also applies to the content container.
As can been seen in the video, this setup uses 4 containers. A main container which covers the whole screen and 3 sub-containers. The main container has a vertical direction. There is one sub-container for the header, one for the footer and one for the content. The header and footer can contain content too of course.
The header and footer sub-containers are configured to NOT have a flexible height. The content container therefore has a height of the screen height minus the height of the header and the height of the footer.
This layout pattern is shown and described in detail in the video below.
Formula’s
In the formula’s below, a global variable is used:
| Name | Value |
| glb_Height1 | 100 |
| Control | Property | Formula |
| Main container | Width | App.Width |
| Main container | Height | App.Height |
| Header container | Height | glb_Height1 |
| Footer container | Height | glb_Height1 |
The canvas app with the layout pattern described on this page can be downloaded from my GitHub repository.
Variants
There are 2 extra variants to think of for this layout pattern:
- Variable height.
- Fixed height based on screen width.
For the first one, the header and footer sub-containers must be configured to have a variable height. The fill portions must be set then too. I personally do not like/use this variant.
For the second one, some extra formula’s are needed for the height property. The value must dependent on the screen (or main container) width. This is a realistic scenario. Compared to large screen, on a phone you normally want to have less space used by a header/footer or perhaps no footer at all.