How to prototype liquid layout elements for your web and mobile app prototypes
In the previous tutorial, we looked at how to prototype adaptive layouts. You can combine this feature with liquid layouts to build responsive websites. In this tutorial, we will look at how to build liquid elements, useful when you need an element to adapt its width to the screen, and how to work with the layout properties of containers like Dynamic Panels.
If you want to have an element that always has the same relative width as the screen, you need to define this with the use of events.
You need to select the element and add an ‘On Window Resize’ + ‘Resize’ event . This action lets you define both the height and the width of the element in four different ways:
- Current: leaves the height/width as it is at that moment of execution.
- Fixed: changes the height/width to the value of pixels indicated.
- Calculated: define the height/width as the result of a calculated expression. You can use the current height or width of the page in that expression.
- Relative to parent: defines the height/width as a percentage of the one in its parent container. The entire page, a cell or a Dynamic Panel can function as Parent containers.
If you want to have an element that is always as wide as the screen you can choose ‘Relative to parent -> 100%’. If you want its width to always be the same proportion of the screen, you can select ‘Calculated’ and build an expression using the constant ‘Window width’.
If you want to prototype a responsive web or app take a look at the next tutorial, which includes an example for clarification.