Layout Elements

Layout Elements define how content is structured and arranged within Pages, Forms, and Page Slices in the ioLoop Page Editor.

They provide the structural areas used to organize text, images, buttons, input controls, Widgets, and other Page Elements. Layout Elements determine how content is grouped, positioned, aligned, and presented across different screen sizes.

For example, a dashboard might use a Container to define its main content area, a Row to arrange summary panels horizontally, and Columns to hold the individual panels. A Flexible Area could organize action buttons, while a Collapsible Area could provide access to additional information when needed.

Layout Elements are added through the Element Library and configured through Element Settings.

Available Layout Elements

The Page Editor provides six core Layout Elements:

Element	Purpose
Container	Defines a structural area with fixed or full-width layout behavior.
Row	Arranges Columns horizontally and controls their alignment, spacing, and responsive layout.
Column	Holds content within a Row and controls how much horizontal space it occupies.
Content Area	Provides a resizable content region with configurable overflow behavior.
Flexible Area	Arranges and aligns groups of child elements using flexible layout behavior.
Collapsible Area	Creates a content region that can be expanded or collapsed, including through Page Flow.

These elements serve different purposes and can be combined to create more complex layouts.

Understanding Layout Hierarchies

Layout Elements follow the Page Editor's parent-child element structure.

A typical layout might look like this:

Container
  Row
    Column
      Heading
      Text
      Button
    Column
      Image

In this structure:

• The Container establishes the overall content area.
• The Row manages the arrangement of its Columns.
• Each Column provides a separate region for content.
• The Heading, Text, Button, and Image are child elements positioned within their respective Columns.

Parent Layout Elements can affect the arrangement of their children. For example, changing a Row's alignment or gutter configuration can change the presentation of every Column inside it.

Individual child elements retain their own configuration options. Changing the typography of a Heading does not ordinarily affect the typography of other elements in the same Column.

Understanding these relationships is important when creating layouts, modifying existing structures, and troubleshooting alignment or responsive behavior.

For more information about selecting and arranging nested elements, see Editing Page Content.

Container

A Container defines a structural area used to group related content within a Page, Form, or Page Slice.

Containers are commonly used to establish the major sections of an interface, such as:

• Page headers and introductory sections.
• Dashboard content areas.
• Forms and their surrounding content.
• Groups of cards, tables, or Widgets.
• Footer sections.

A Container can hold Rows, Columns through Rows, and other supported Page Elements. Containers can also be nested when a section needs additional structural organization.

Container Width

The Container provides two principal width options through Element Settings.

Width	Behavior
Fixed	Uses a contained layout width rather than expanding across all available horizontal space.
Full Width	Expands across the available width of its containing area.

Fixed is useful for ordinary page content where a consistent, contained presentation is preferred. Examples include informational pages, forms, and standard dashboard sections.

Full Width is useful when the design needs to occupy more horizontal space, such as a wide toolbar, dashboard region, or banner section.

The visible width of a Container also depends on the space made available by its parent layout. A Full Width Container inside a narrower parent does not necessarily occupy the entire browser viewport.

Using Containers Effectively

Use Containers to define logical sections of a page before adding detailed content.

For example, a dashboard could use separate Containers for the page header, summary metrics, and detailed records. This allows each section to be organized and configured independently.

Avoid creating additional nested Containers unless they serve a structural or presentation purpose. Excessive nesting can make the element hierarchy harder to navigate and maintain.

Row

A Row is a layout structure used to arrange Columns within a horizontal layout.

Rows are the primary building blocks for multi-column page sections, including:

• Two-column content sections.
• Dashboard summary panels.
• Side-by-side forms and information panels.
• Card grids.
• Responsive content arrangements.

A Row normally contains one or more Columns. Each Column holds the content that belongs in that portion of the layout.

Row Configuration

Element Settings provide controls for how a Row arranges its Columns.

Setting	Purpose
Horizontal Alignment	Controls how Columns are positioned along the horizontal axis.
Vertical Alignment	Controls how Columns are aligned vertically within the Row.
Column Layout Format	Controls the column arrangement for supported screen sizes.
Gutters	Controls the spacing between Columns.
Responsive Settings	Allows supported layout properties to vary for desktop, tablet, and mobile.

Horizontal Alignment

Horizontal alignment determines how the Columns are distributed across the available width of a Row.

Available alignment choices include positioning Columns toward the left, center, or right, as well as distributing available space around or between them.

For example, a Row containing two narrower Columns could position both Columns toward the center or distribute the remaining horizontal space between them.

The effect depends on the available space and the widths assigned to the Columns. If the Columns already occupy the full available width, there may be little remaining space for horizontal distribution.

Vertical Alignment

Vertical alignment controls the relative positioning of Columns when they have different content heights.

Common options include aligning Columns toward the top, center, or bottom of the Row.

For example, a Row containing an image in one Column and a shorter text block in another can use vertical alignment to position the text relative to the image.

Column Layout Format

The column layout format controls how Columns are arranged at supported screen sizes.

A common use is displaying multiple items side by side on larger screens and fewer items per Row on smaller screens.

For example:

Screen Size	Example Arrangement
Desktop	Three Columns per Row
Tablet	Two Columns per Row
Mobile	One Column per Row

The appropriate arrangement depends on the content being displayed and the individual Column settings.

Gutters

Gutters define the spacing between Columns.

Use the default gutter configuration for most layouts to maintain readable separation between content areas.

Removing gutters can be useful when Columns are intended to sit directly next to each other, such as adjacent visual panels.

Gutters should not be confused with the padding or margins of individual elements. Gutters control spacing between Columns, while other spacing properties can affect the content inside a Column or the space around an element.

Column

A Column defines a content region inside a Row.

Columns hold the actual Page Elements displayed within a multi-column layout, including:

• Headings and text.
• Images and videos.
• Buttons and input controls.
• Tables and Widgets.
• Content Areas and Flexible Areas.
• Additional nested layout structures.

For example, a two-column product section might display a product image in the first Column and its description, price, and purchase action in the second.

Column Width

Column width determines how much of the Row's horizontal space is allocated to that Column.

The editor provides automatic and percentage-based width choices, including common values such as:

Width	Typical Use
Auto	Allows the layout to determine the Column's width.
25%	Small information panels, icons, or compact summary areas.
33%	Three-column dashboards or repeated content layouts.
50%	Two-column sections with equal-width content.
67%	Primary content beside a narrower secondary panel.
75%	Wide content areas with a smaller supporting area.
100%	A Column that occupies the full available Row width.

These percentages describe the intended width allocation within the layout. The actual rendered dimensions can also be affected by the containing Row, gutters, and other applicable layout settings.

Responsive Column Widths

Column widths can be configured separately for supported desktop, tablet, and mobile layouts.

For example, a page containing a form and a supporting information panel might use:

Screen Size	Form Column	Information Column
Desktop	67%	33%
Tablet	50%	50%
Mobile	100%	100%

On desktop, the form receives more horizontal space while the information panel remains beside it.

On mobile, both Columns can occupy the full available width, allowing the content to stack vertically instead of becoming too narrow.

Configure Column widths together with the parent Row's responsive settings, then preview the resulting layout.

Nested Columns

Columns can contain additional layout structures when needed.

For example, a primary Column could contain a nested Row with two Columns for a pair of related information panels.

Row
  Column (67%)
    Heading
    Text
    Row
      Column
        Summary Panel
      Column
        Summary Panel
  Column (33%)
    Information Panel

Use nested Rows and Columns when the content genuinely requires a secondary layout structure.

Avoid nesting multiple levels solely to adjust small amounts of spacing or alignment when simpler element settings can achieve the desired result.

Content Area

A Content Area is a resizable region used to group content within a defined area of the interface.

It is particularly useful when content needs its own dimensions or overflow behavior rather than relying entirely on the surrounding page layout.

Common uses include:

• Scrollable information panels.
• Content sections with controlled dimensions.
• Detail panels inside dashboards.
• Grouped information within forms.
• Content regions inside Page Slices.

A Content Area can contain supported Page Elements and other appropriate layout structures.

Sizing a Content Area

Content Areas support width and height adjustments through the editor.

A Content Area can be resized to suit the intended design. Its available dimensions and the space allocated by the parent layout determine how its contents are displayed.

The editor also provides controls for resetting width and height.

These reset controls are useful when a Content Area has been manually resized and should return to its default sizing behavior.

Content Overflow

Content overflow determines what happens when the content inside a Content Area exceeds the space available to display it.

The Content Overflow Options include:

Option	Behavior
Default	Uses the Content Area's default overflow behavior.
Auto	Allows scrolling when content exceeds the available area.
Always Scroll	Uses scrolling behavior for the content region.
Hide	Hides content that extends outside the visible area.
Clip	Clips content at the boundaries of the area.

The practical effect of an overflow setting depends on the dimensions of the Content Area and the amount of content inside it.

For example, a dashboard panel with a constrained height might use Auto to allow users to scroll through additional information without increasing the height of the entire dashboard.

Hide and Clip should be used carefully because information extending beyond the visible area may not be accessible through ordinary user scrolling.

The visibility of scrollbars can also vary depending on the browser and operating system.

Choosing Overflow Behavior

For ordinary content that should expand naturally with its contents, use the default behavior unless another option is required.

Use Auto when the Content Area must remain within defined dimensions but its content may vary in length.

Use Always Scroll when consistent scroll handling is part of the intended layout.

Use Hide or Clip only when restricting the visible content is intentional.

Avoid placing essential instructions, required form fields, or primary actions inside regions where overflow settings could make them inaccessible.

Flexible Area

A Flexible Area provides a flexible layout for arranging and aligning groups of child elements.

Unlike a Row and Column structure, which is intended for formal column-based layouts, a Flexible Area is suited to arranging related elements within a common area.

Typical uses include:

• Action bars.
• Groups of buttons.
• Status indicators and badges.
• Compact navigation controls.
• Groups of related interface elements.

Flexible Area Configuration

The Flexible Area provides the following configuration options through Element Settings.

Setting	Purpose
Inline	Controls whether the area uses inline layout behavior.
Horizontal Alignment	Controls how child elements are positioned or distributed horizontally.
Vertical Alignment	Controls how child elements are aligned vertically.
Responsive Alignment	Allows supported alignment settings to vary across desktop, tablet, and mobile.

Horizontal Alignment

Horizontal alignment provides options such as:

• Left.
• Center.
• Right.
• Space Around.
• Space Between.

These options allow a group of elements to be positioned together or distributed across the available horizontal space.

For example, a Flexible Area containing three action buttons could align them toward the right edge of a toolbar.

Alternatively, spacing between elements could be used to distribute the available horizontal space.

Vertical Alignment

Vertical alignment controls the positioning of child elements along the vertical axis.

Available options include:

• Top.
• Center.
• Bottom.
• Stretch.
• Baseline.

Stretch is useful when child elements should occupy the available vertical space according to the layout.

Baseline alignment is useful when elements containing text should align according to their text baselines rather than their outer boundaries.

The visible result depends on the types, dimensions, and styles of the child elements.

Responsive Alignment

Flexible Area alignment can be configured for supported desktop, tablet, and mobile sizes.

For example, a group of action buttons might be right-aligned on desktop but centered on mobile.

This allows the same group of elements to remain usable and visually appropriate across different screen sizes.

Flexible Area vs. Row and Column

Both approaches can arrange elements horizontally, but they serve different structural purposes.

Requirement	Recommended Element
Create a two-column page section	Row and Columns
Create a three-column dashboard	Row and Columns
Assign percentage-based widths to content regions	Row and Columns
Arrange a compact group of action buttons	Flexible Area
Align several status badges	Flexible Area
Distribute a group of related controls	Flexible Area

Use Row and Columns when the layout requires defined content regions with individual widths and responsive column arrangements.

Use a Flexible Area when the primary requirement is aligning or distributing a group of child elements.

Collapsible Area

A Collapsible Area creates a content region whose contents can be expanded or collapsed.

Collapsible Areas are useful when additional information or controls should remain available without occupying space in the interface at all times.

Typical examples include:

• Frequently asked questions.
• Optional instructions.
• Advanced configuration settings.
• Additional record details.
• Supporting information panels.

A Collapsible Area can contain supported child elements, including text, controls, and other appropriate layout structures.

Collapsible Area Configuration

The Collapsible Area provides the following settings.

Setting	Options	Purpose
Initial State	Collapsed, Expanded	Determines whether the content begins hidden or visible.
Direction	Vertical, Horizontal	Determines the direction in which the area expands or collapses.

Initial State controls the starting presentation of the Collapsible Area when the relevant interface is initialized.

Use Collapsed when the information is optional or supplementary.

Use Expanded when the information should initially be visible but may be collapsed later.

Direction determines whether the expansion and collapse behavior operates vertically or horizontally.

Controlling Collapsible Areas with Page Flow

Collapsible Areas can also participate in supported Page Flow interactions.

For example, a Button can be configured to trigger Page Flow that expands, collapses, or toggles a Collapsible Area.

A typical interaction could be:

1. A Page contains a Button labeled Show Advanced Options.
2. A Collapsible Area contains additional configuration controls.
3. The Collapsible Area is initially collapsed.
4. The Button's Page Flow interaction changes the Collapsible Area's state.
5. The additional controls become visible when the area is expanded.

The Collapsible Area provides the visual structure and state behavior. The Button and its configured Page Flow determine how the application responds to the user's action.

For more information about connecting interface actions to application behavior, see Page Flow.

Designing Collapsible Content

Keep the contents of a Collapsible Area related to a clear purpose.

For example, an Advanced Settings section should contain settings that logically belong together rather than unrelated content.

Avoid placing essential information inside a Collapsible Area that users may never expand.

When using Page Flow to control the area, verify that the triggering action and the resulting expanded or collapsed state behave as intended.

Common Layout Structures

The following examples illustrate how Layout Elements can be combined to create common application interfaces.

Simple Content Section

Container
  Row
    Column
      Heading
      Text
      Button

This structure provides a straightforward content section with a heading, explanatory text, and an action.

It is suitable for informational pages, introductory sections, and simple application screens.

Two-Column Content Section

Container
  Row
    Column
      Heading
      Text
      Button
    Column
      Image

This structure separates descriptive content and supporting media into two Columns.

It is useful for introduction sections, product descriptions, and explanatory content paired with images.

Configure the Row and Column widths to control the relative space allocated to each section. Use responsive settings to allow the Columns to stack where appropriate.

Dashboard Summary Section

Container
  Row
    Column
      Content Area
        Heading
        Text
    Column
      Content Area
        Heading
        Text
    Column
      Content Area
        Heading
        Text

This structure creates three summary panels within a Row.

Each Column holds a Content Area containing the information to be displayed.

For example, the panels could show total registrations, active users, and completed transactions.

Configure the Row's responsive layout so the panels remain readable on smaller screens.

Action Bar

Flexible Area
  Button
  Button
  Button

A Flexible Area can organize related actions such as Create, Refresh, and Open Form.

Use horizontal alignment to position the actions together or distribute them across the available space.

The Flexible Area controls their layout. Each Button retains its own action and appearance configuration.

Scrollable Information Panel

Container
  Row
    Column
      Content Area
        Heading
        Text
        Text
        Text

A Content Area with constrained dimensions and Auto overflow can display longer information within a scrollable region.

This is useful for supporting information that should remain available without causing the surrounding layout to grow indefinitely.

Expandable Advanced Settings

Container
  Button
  Collapsible Area
    Heading
    Input
    Dropdown
    Button

This structure provides access to additional controls inside a Collapsible Area.

The Collapsible Area can begin collapsed, with a separate Button using Page Flow to control its state.

This approach is useful when advanced options are not required for every user interaction.

Responsive Layouts

Responsive layouts allow content to adapt to different screen sizes without creating a separate Page for every device.

Rows, Columns, and Flexible Areas provide responsive configuration options for desktop, tablet, and mobile.

A common approach is to reduce the number of side-by-side content regions as the available width decreases.

For example:

Layout	Desktop	Tablet	Mobile
Summary cards	3 per Row	2 per Row	1 per Row
Main content and sidebar	Side by side	Side by side if space permits	Stacked
Form and supporting information	Two Columns	Two Columns or stacked	Stacked
Compact action group	Right-aligned	Right-aligned or centered	Centered

These are example design choices rather than mandatory layouts.

Working with Responsive Settings

When configuring a responsive layout:

1. Establish the main structural layout using Containers, Rows, and Columns.
2. Configure the intended desktop arrangement.
3. Adjust the Row's layout format for tablet and mobile.
4. Configure individual Column widths where necessary.
5. Adjust Flexible Area alignment for smaller screens if required.
6. Preview the page at the intended screen sizes.
7. Verify that the content and interactions remain usable.

The Row and its Columns should be configured together. Changing only the width of an individual Column may not produce the intended arrangement if the Row's layout format is configured differently.

Responsive Design Considerations

Pay particular attention to:

• Readability: Text and labels should remain readable without unnecessary horizontal scrolling.
• Content width: Forms, tables, and Widgets need sufficient horizontal space.
• Alignment: Elements should remain correctly aligned when Columns change width or stack.
• Actions: Buttons and interactive controls should remain visible and usable.
• Overflow: Content Areas should not hide important information at smaller sizes.
• Nested layouts: Responsive behavior should be checked at each relevant level of nesting.

Also verify that Page Flow interactions continue to operate after layout changes, especially when interactive elements have been moved, replaced, or reorganized.

Working with Layout Elements

When building or modifying a layout:

1. Open the Page, Form, or Page Slice in the Page Editor.
2. Select the intended parent element or insertion location.
3. Use the Element Library to add the required Layout Element.
4. Add the supported child elements within the new structure.
5. Select the Layout Element and open Element Settings.
6. Configure its available sizing, alignment, spacing, and responsive options.
7. Save and preview the result.

The available insertion options depend on the selected parent and the child elements it supports.

When modifying an existing layout, consider whether the element is referenced by Page Flow or other application configuration.

Removing a parent Layout Element can affect the nested elements it contains. Replacing an element that participates in an application interaction may also require updating the configuration that refers to it.

For more information, see Element Library and Editing Page Content.

Good Practices

• Establish the major structure first. Create the main page sections and content regions before adding detailed content and styling.
• Use the appropriate Layout Element. Containers organize sections, Rows and Columns establish column-based layouts, and Flexible Areas align groups of related elements.
• Keep the hierarchy understandable. Use nesting where it provides meaningful structural organization, rather than introducing unnecessary levels.
• Configure parent and child layouts together. Alignment, width, and spacing settings can interact and affect the resulting layout.
• Design for smaller screens. Use responsive settings to ensure that content remains readable and usable on mobile devices.
• Use overflow intentionally. Avoid hiding important content or controls inside constrained Content Areas.
• Keep optional content separate. Use Collapsible Areas for supplementary information and advanced options rather than essential content.
• Preview after structural changes. Verify layout, content visibility, responsive behavior, and interactions before finalizing the page.

Common Mistakes

Avoid these common layout problems:

Problem	Recommended Approach
Placing many unrelated elements directly in the top-level page area	Organize related content into logical Containers and other appropriate Layout Elements.
Creating excessive nested Rows and Columns	Use the simplest structure that satisfies the layout requirement.
Using empty elements only to create visual spacing	Prefer the appropriate spacing and alignment settings where available.
Using a Flexible Area for a formal multi-column layout	Use a Row and Columns when individually sized content regions are required.
Using fixed Column arrangements without considering mobile layouts	Configure and preview responsive Row and Column settings.
Hiding essential information using overflow options	Ensure that important content remains visible or accessible.
Placing primary controls inside collapsed sections	Keep essential actions readily accessible.
Reorganizing elements without checking application behavior	Verify Page Flow references, Form interactions, and Widget behavior after changes.

Layout Elements are most effective when they reflect the actual structure of the interface.

A well-organized layout makes the Page easier to edit, simplifies responsive adjustments, and provides a more maintainable foundation as the Project grows.

Related Topics

• Element Library — Add and organize Page Elements.
• Element Settings — Configure element properties and presentation.
• Editing Page Content — Select, arrange, and modify elements.
• Editing Structured Pages — Work with Page Slices used in Structured Pages.
• Page Flow — Configure application interactions and supported element behavior.
• Forms — Create and configure application Forms.