Liquid layouts and breakpoints

You can use events to define breakpoints and create liquid layouts, where elements on the screen will move into more visible positions as the screen size widens or narrows. These events can link to another screen with a different layout, show a Dynamic Panel that has a different layout, or move elements on the screen.
Liquid layout example

Liquid layout events

When creating the breakpoint event, start with the “On Window Resize” trigger. The “On Window Resize” trigger will detect when the simulation window has been resized. Then, for the resulting action, choose a “Link To”, “Move”, or “Set Active Panel” action.

The “Link To” action will link to another screen with a different layout.
Linked screen liquid layout

The “Move” action will move an element to another area on the screen to make it more visible.
Move event

The result of the “Move” action will look like this:
Liquid layout move

The “Set Active Panel” action will show another Dynamic Panel which has a different layout.
Set active panel event

The result of the “Set Active Panel” action will look like this:
Liquid layout panel

Liquid layout conditions

After creating the event, you need to define a condition so that the event will only trigger when the simulation window is a certain size. This condition will detect the simulation window width, and will compare that to a window size that you define. That defined window size is the breakpoint, which is when the contents of the layout start to get cut off, or when elements start to intersect when the simulation window is resized.

Conditions for liquid layouts

Here’s how to create that condition:

  1. Look to the Events palette, where you have just created an event. Click on the “add condition” text.
  2. The Conditional Expression builder will appear.
  3. Click on the “Constants” tab. Drag the ‘Window Width’ icon into the open space in the expression. The ‘Window Width’ constant will automatically detect the simulation window’s width.
  4. Click on the “Functions” tab and look to the “Comparators” section. Here, you’ll find the comparators you can use to define the condition. You’ll likely want to choose a ‘Greater Than’ (‘>’) or ‘Less’ Than (‘<’) comparator. ‘Greater Than or Equal To’ (‘≥’) and ‘Less Than or Equal To’ (‘≤’) will also work well here.
  5. After dragging one of those comparators next to the ‘Window Width’ icon, an open space will appear.
  6. Double click in that open space and type a value. This will be the simulation window’s width that must be met to trigger the event. Common widths are 1000 (web), 900 (tablet) and 600 (mobile). Depending on your layout, you might want to adjust these numbers to be larger or smaller.
  7. Optional: for a tablet layout, you will need to add another part to the condition using the “And” (‘&’) logic function.
  8. Click OK to finish building the condition.

Once you’ve created the condition for this event, you’ll need to create another event that will switch back to the default layout when the window width condition is no longer met. This will be another “On Window Resize” + “Link To”/”Set Active Panel”/”Move” event.

Note: Simulation settings must be set to expand to the browser width. You can specify this in simulation settings, or in the simulation window.

Simulation setting