< Previous Article Next Article >

Layouts

Rich Display Layouts are special types of widgets that can contain other widgets within them. Layouts are divided into one or more container sections. When necessary, layouts can also embed other layouts.

Simple Layout

The Simple Layout widget serves as a simple container (rendered as an HTML DIV element) to host other widgets.

At design time, the Simple Layout is represented by a dashed border. However, at runtime, the Layout border is not visible.

Screenshot

There are many instances when grouping widgets into a Simple Layout is convenient. For example, if you wanted to dynamically hide a group of widgets, grouping them together into a Layout simplifies the task.

Misc. Layout Widgets

A number of traditional widgets, such as Panels, Tabs, and Accordions are implemented as Layouts. This means they can host other widgets in addition to providing their own core functionality.

Screenshot

Responsive Layout

The Responsive Layout widget allows you to rearrange your screen content in response to difference Web and mobile screen sizes. It is based on a Web standard called CSS Grid Layout.

Here are some resources that explain the CSS Grid Layout in more detail:

Rich Displays allow you to setup a CSS Grid Layout visually in a point-and-click manner. When you first add a Responsive Layout widget to the canvas, you will see some default containers.

Screenshot

Double-click the Responsive Layout widget to open the Responsive Layout Editor.

Screenshot

You can now adjust container sizing and positioning for each screen size. Here is a quick video that shows the Responsive Layout Editor in action:

Mobile Layout

The Mobile Layout provides convenient sections for an optional header, an optional footer, and content in the middle.

Screenshot

Table Layout

A Table Layout splits your content into uniform rows and columns. Each cell is its own container for other widgets.

Positioning with Layouts

Layouts make it easier to design applications that are responsive.

When you initially drop any element on the canvas, its position and size are fixed. But when elements are placed within layouts, they are positioned relative to their parent container, and this allows you to use percentages and anchoring.

Using Percentages

Widget properties relating to size and positioning can be set using percentages that are relative to its container. A quick way to start using percentages is from the Design Toolbar.

Screenshot

Once percentages are set, whenever your move or resize an element in the designer, the adjustments are made using percentages rather than pixel dimensions going forward. A % indicator will appear at the top of your widget to let you know that percentages are used.

Screenshot

Anchoring

By default, element positioning is specified from the left and top sides of its container; however, there are times when you might want to anchor an element to the right and/or bottom. You can do this by selecting the Anchor option on the Design Toolbar.

Screenshot

Once an element is anchored, moving it in the designer affects the position from the anchored side.

As the element's container is resized or rendered at different resolutions, it maintains its position in relation to the side it was anchored to.

Screenshot

Centering Elements

To center an element within a Layout container, right-click the element and select Center Horizontally or Center Vertically.

Expand to Layout Grid Property

Grids are complex widgets because they contain multiple rows with cells that contain other widgets. If you'd like the grid to expand within its Layout container, make sure to set the grid's expand to layout property. This will automatically resize the columns and adjust the number of visible rows based on the current size of the grid's container.

Screenshot

Questions?

Have questions about this topic? Ask for help on our NodeRun Discussion Forum.

< Previous Article Next Article >