Responsive design layout pattern – Column drop - #ARCHIVED#

This content has been archived. It may no longer be relevant.  

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:

NameValue
glb_MaxWidth1000
glb_Width1800
glb_Width2600
ControlPropertyFormula
Main containerXIf(App.Width > glb_MaxWidth, (App.Width - glb_MaxWidth) / 2, 0)
Main containerWidthIf(App.Width > glb_MaxWidth, glb_MaxWidth, App.Width)
Main containerHeightApp.Height
Sub-containerMinimum widthIf(
Container4.Width < glb_Width2,
Container4.Width,
If( (Container4.Width >= glb_Width2) && (Container4.Width < glb_Width1),
(Container4.Width / 10) * 3,
Container4.Width / 10
)
)

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.