Vertical Layout

The Vertical Layout control is used to hold content inside it vertically (stacked on-top of one another).Note that this control can be bound to a list which then becomes a repeating section.

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

Vertical 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; Vertical, Vertical Tight, Horizontal, Horizontal Inline Scroll, Horizontal Tight, Horizontal Auto-wrap

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.     

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


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 options settings...

This is the result...

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


With the Switch control, 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


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