The Liquid Layout iBloc is a custom action that enables liquid layout (a.k.a. flexible or elastic layout) behavior. It supports dynamic scaling of selected elements, centering elements horizontally and/or vertically, wrapping or truncation (with ellipses) of text widgets, fixing position of elements while scrolling, and floating elements relative to the right and/or bottom edge of the browser.
Current Version: 3.6
Supported iRise Studio Versions: 8.7 – 9.2
Supported Browsers: IE 8.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes
What’s new in version 3.6?
- Dynamic layout adjustment when iRise directory pane in Reader is opened or closed.
- Proportional scaling of images with *stretch* (preserves aspect ratio).
- Vertical scaling (*vstretch*) of widgets (instructions for use below).
- Support for iRise 9.x.
- NOTE: If upgrading existing projects from version 3.4 or earlier, you must delete all instances of the iBloc before inserting the new version.
What does it do?
- ‘Stretches’ widgets relative to window size – horizontally and/or vertically.
- ‘Fixes’ widgets independently of window scrolling. (Improves on Scroll Lock, rendering that iBloc obsolete)
- ‘Floats’ widgets relative to the right or bottom edge of the browser.
- Centers widgets horizontally or vertically in the browser window
- Text widgets can be limited to one line and truncated with ellipses added if the widget is narrower than contents, or can wrap to multiple lines dynamically.
- Works on mobile devices, and resizes/repositions content on orientation change.
How do I use it?
- To ‘stretch’ a widget horizontally relative to window size, insert ‘*stretch*’ into the Name property (replaces “Liquid” in previous versions).
- To stretch a widget by a percentage of change in window size, including a number between % characters in the Name property. For example, to scale by 50%, include the string ‘%50%’.
- To ‘stretch’ a widget vertically relative to window size, insert ‘*vstretch*’ into the Name property, and enter the height of the page in Studio into the “Original layout height” property of the iBloc (percentage scaling is not supported for vstretch)
- To ‘fix’ a widget independently of window scrolling, insert ‘*fix*’.
- To fix a widget after user scrolls a specified number of pixels, include the number of pixels between @ characters in the Name property. For example, to fix position of a widget after scrolling 100 pixels, include the string ‘@100@’.
- To ‘float’ a widget relative to the right edge of the browser, insert ‘*right*’ (replaces “Float” in previous versions).
- To ‘float’ a widget relative to the bottom edge of the browser, insert ‘*bottom*’
- To center a widget horizontally in the window, insert *center*.
- To center a widget vertically in the window, insert *middle*.
- Text widgets with the *stretch* keyword are limited to one line and truncated with ellipses added if the text widget scales to a size that is not wide enough to display the contents — even if the widget wraps to more than one line in studio.
- Text widgets can be forced to wrap to more than one line when contents do not fit the widget width by including the key string *wrap* in the Name property (effectively disabling truncation).
You can connect any page widget to this action using any event, but in most cases you’ll want the Liquid Layout effect applied on load. To do this, you have to create a ‘dummy’ action that is associated with the page’s onLoad event. Here’s how:
- Select the Page (click on a blank area of the page or an empty part of the canvas).
- In the Properties Panel, select the Events tab.
- Under “Show events for:”, select “On load”.
- Under the Events panel, click “+ Add”, then select “Action”.
- In the Set Page Action window that pops up, just click “Done” (leave Show/Hide and Toggle visibility selected, with no widgets checked).
- Place a Liquid Layout iBloc onto the canvas near the new Show/Hide Action that you just created (it will be near the right edge of the page).
- Drag the Show/Hide action created in step 5 onto the Liquid Layout Action iBloc to connect them.
For best results, use the Liquid Layout at the Page level (not within Masters), and use only one Liquid Layout iBloc per page.
Tips & Tricks
- Create customized liquid layout effect by applying effects to different sets of page elements. (For example, stretch the main content area of a page and keep navigation elements fixed.)
- Set a Minimum browser width value in the properties panel to prevent users from over-compressing elements. (For example, to preserve readability of page content areas, or overlapping widgets)
- Set a Maximum browser width value to prevent the layout from stretching beyond a specified limit.