Responsive design layout pattern – Mostly fluid

In the image above, six zones are shown.

In the “Mostly fluid” layout pattern, a zone is moved to a next row when there is no more room for its minimum zone. When the screen has a small width, all zones are placed on top of each other.

As can been seen in the video (screen 6 in the app), this setup uses a main horizontal container which contains 6 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 final 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. The way this layout pattern is implemented is the same as the layout pattern “Column drop”.

In the downloadable canvas app (see below), screen 7 has been added to show you that this layout pattern was already possible before the new responsive features were added, but it needs a lot more calculation. The responsive container really makes it more easier.

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-container 3Minimum widthIf(
Container6.Width < glb_Width2, Container6.Width, If( (Container6.Width >= glb_Width2) && (Container6.Width < glb_Width1),
Container6.Width / 2,
Container6.Width / 5
)
)
Sub-container 5VisibleIf(
Container6.Width < glb_Width2, false, If( (Container6.Width >= glb_Width2) && (Container6.Width < glb_Width1),
false,
true
)
)

In the formula for the sub-container as shown above, Container6 is the label of the main container.

For zone 5 and zone 6, the visibility is also configured.

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 *