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).
Appearance
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
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.
Performance
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.
Example
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.
Events
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.
Methods
For detailed information on the available methods for this control, access the JS Doc file.
Related Article(s)
- Author: Elliot Pytosky
- Date Created: June 8, 2015
- Date Modified: July 27, 2015
Comments