Horizontal Section (deprecated)

This control creates an area in which layout elements are arranged side by side horizontally. If the section is bound to a list, the section repeats for each item in the list.

Tip: The deprecated Horizontal Section control is replaced with the responsive Section control in the Responsive Coaches toolkit. See Section control.

As of 8.5.5, coach views that are in a horizontal section no longer have their styling properties ignored. The implementation of the Horizontal Section control changed to no longer use table styling.

Important: If you add too many elements into a horizontal section, the excess elements might overrun the border of the section. The excess elements do not wrap by default. You can avoid the overrun by taking one or more of the following actions:

Configure the section to wrap by selecting the Automatic Wrap configuration property. This is the simplest option.
Configure the section to not show its border.
Reduce the number of elements in the section.
Add width settings to the horizontal section using HTML Attributes to override the style that sets the default width, or specify width values on the Positioning tab in the Properties view.
Reduce the width of individual elements using HTML Attributes to override the styles that set their width.
Create your own horizontal section control.
If you have added other custom CSS to the horizontal section control, you might have to adjust the CSS to get the desired behavior.

If you add too many elements into a horizontal section, the section header does not expand to be as wide as the section contents. You can make the section header expand properly by setting a specific width to the horizontal section using HTML Attributes.

Tip: Ensure that somewhere in the DOM parent hierarchy of the horizontal section that there is an explicit value for the width.

By default, the horizontal section spaces out its child views by adding 0.5em to the left padding of the second and subsequent coach views. (In previous releases, a border-spacing property served this purpose.) You can use the options on the Positioning tab in the Properties view or HTML Attributes to override the default padding and space out the elements to suit your needs.

Restrictions and limitations

None

Data binding

Set the data binding for the control in the General properties tab.

Table 1. Horizontal Section control data binding
Binding description	Data type
Binding has no affect unless the section is bound to a list, in which case the section repeats for each item in the list.	ANY

Configuration properties

Set or modify control configuration in the Configuration properties tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor, you are setting the value for the large screen size. The other screen sizes inherit this value.

Table 2. Horizontal Section control configuration properties
Configuration property	Description	Data type
Show Border	Select this option to add a visible border to the section at run time.	`Boolean`
Square Border Corners	Select this option to make the corners of the visible border square. By default, the corners are rounded.	`Boolean`
Align Right	Select this option to align the content of the section to the right. By default, the content is aligned to the left.	`Boolean`
Collapsible	Select this option to have the section collapse or expand when users click the header. The default value is not collapsible (`False)`.	`Boolean`
Initially Closed	Select this option to have the section collapsed when users first see it. Only the header is visible. The default value is expanded (`False)`.	`Boolean`
Automatic Wrap	Select this option to have the section wrap its contents if there is not enough room to show the contents on one line. The default value is to not wrap the contents (`False)`.	`Boolean`