Horizontal Layout

The Horizontal Layout section is used to hold content inside it horizontally (stacked next to each another).  Note that this control can be bound to a list which then becomes a repeating section.

The Horizontal Layout along with the Vertical Layout are among the most common controls used for designing a user interface.

Horizontal Layouts are also capable of repeating list objects providing them capability similar to tables.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).


Layout Flow Horizontal/vertical layout of child controls; Horizontal, Horizontal Inline Scroll, Horizontal Tight, Horizontal Auto-Wrap, Vertical, Vertical Tight

Horizontal Alignment Horizontal alignment of child controls; Justified, Left, Center, Right

Child Width(s) width of child controls in either "px" or "%" or "em" (px assumed)

Vertical Alignment Controls the vertical alignment of the elements displayed in the layout. Only applies to horizontal layout flows; Top, Middle, Bottom

Width Width in px, %, em; for example: 50px, 20%, 0.4em. If no unit is specified, px is assumed

Height Height in px, %, em; for example: 50px, 20%, 0.4em. If no unit is specified, px is assumed


Responsive Sensor (Optional) Id of the Responsive Sensor control containing this Layout. If omitted, the nearest sensor in the parent chain is used.

Behaviors Can adjust the settings for the Box Factors set within your Responsive Sensor.


Async Loading Provides a better UI experience for large data sets (at the expense of slower overall row-loading time once the section starts loading). Only used if this section is bound to a list.

Async Batch Size Defines how many rows are loaded synchronously in an asynchronous batch. This can help tune/optimize synchronous vs. asynchronous loading performance. Only used if this section is bound to a list.


These are the configuration option settings...

This is the result...

Note: Inside the Horizontal Layout are three Panels all set to a width of 350px.


With the Horizontal Layout Section, there are 2 types of event handlers:

  • On Load When the page loads
  • On Responsive Update When the section responsively sizes

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.


For detailed information on the available methods for this control, access the JS Doc file.

Related Article(s)

SPARK Layout Capabilities

Horizontal Split

Vertical Layout

Responsive Sensor



  • Author: Elliot Pytosky
  • Date Created: June 8, 2015
  • Date Modified: July 27, 2015
Was this article helpful?
0 out of 0 found this helpful