In the image above, four zones are shown.
In the “Column drop” layout pattern, a zone moves to a new and its own “row” when the minimum width for that zone is not possible anymore on that row. When the screen has a small width, all zones are placed on top of each other.
As can been seen in the video (screen 4 in the app), this setup uses a main horizontal container which contains 4 responsive sub-containers. All sub-containers are configured to have a flexible width with equal portions.
The main point is that the minimum width should become a formula where the value is:
- dependent on the width of the main container.
- dependent on the breakpoints set.
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_MaxWidth | 1000 |
| glb_Width1 | 800 |
| glb_Width2 | 600 |
| Control | Property | Formula |
| Main container | X | If(App.Width > glb_MaxWidth, (App.Width - glb_MaxWidth) / 2, 0) |
| Main container | Width | If(App.Width > glb_MaxWidth, glb_MaxWidth, App.Width) |
| Main container | Height | App.Height |
| Sub-container | Minimum width | If( |
In the formula for the sub-container as shown above, Container4 is the label of the main container.
The canvas app with the layout pattern described on this page can be downloaded from my GitHub repository.