Responsive design layout pattern – Column drop

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.

Leave a Reply

Your email address will not be published. Required fields are marked *