Container Begin Properties

Description

Container Begin Properties are used with many of the container types available inside the [Container] option.

Discussion

Containers are used to group controls together. The Container Begin Properties are used to configure much of the look and feel of the container. The options available will depend on the container's Sub-type -- e.g. 'None', 'Panel Overlay', or 'Alignment'.

Constrain javascript function

The Constrain javascript function is the name of a JavaScript function to call to determine whether or not the user can tab or shift+tab out of a container.

The function must return a true or false value. If the function returns true, the container is constrained and the user cannot tab out of the container.

For example:

function isConstrained() {
    // 'constrain' is a Logical checkbox in the UX component
    // This function checks the value of the checkbox.
    // If checked, returns true - the user cannot tab out of the container
    // If unchecked, returns false - the user can tab out of the container
    var checked = {dialog.object}.getValue('constrain');

    if (checked) { return true; }
    return false;
}

The Constrain javascript function is available when the Constrain tab key property has been set to "Javascript".

Constrain tab key

The Constrain tab key property can be enabled to prevent the user from tabbing out of a contained by setting the property to "Yes" or "Javascript":

No: The default value. User can tab out of the container.
Yes: User cannot use the tab or shift+tab keys to tab out of the controls in the container.
Javascript: A JavaScript function is called to determine whether or not the user can tab out of the control. See Constrain javascript function for more information.

Using this feature you can constrain controls in a Panel Card by wrapping all of the controls in a container.

Container alignment

Specify how the content of the container should be aligned. Applies to the container content, not the container itself. Only applies if the width of the container is greater than the width of the content.

Container class

Specify the optional class name for the container.

Container content vertical alignment

If Use CSS Flexbox is enabled (Use CSS Flexbox is enabled automatically if you set the Container's alignment to 'Center' or 'Right'), you can set the vertical alignment of the controls in the container using the Container Content Vertical Alignment property. The Container content vertical alignment property can be set to Top, Center, or Bottom.

Container content vertical alignment is only available for containers with a Sub-type of 'None'.

A 'Center' aligned container with vertical alignment set to 'Top'

A 'Center' aligned container with vertical alignment set to 'Middle'

A 'Center' aligned container with vertical alignment set to 'Bottom'

Container height

The Height property defines the height of the container. The height is specified using CSS syntax. For example:

3in

panel.height

You can use the special panel.height variable when specifying the height of a Container that is inside a PanelCard. panel.height represents the height of the PanelCard's body section (the section between the PanelHeader and PanelFooter). You can use panel.height in an expression.

For example:

panel.height/2

This would set the Container's height to half of the PanelCard's height.

screen.height

In addition to values supported by CSS, you can also use the screen.height variable to set the container's height:

screen.height

You cannot use screen.height when defining the in-line style for the container. You can only use screen.height in the container's Height property.

screen.height will adjust the height of the container to fill the vertical space of the screen. It can also be used with a simple expression to set the height of the container to a portion of the total screen height. For example, the following expression sets the height of the container to 50% of the screen height:

screen.height/2

Using screen.height in Alignment Containers
If you use an Alignment container and you set the Container vertical alignment property to Middle and you do NOT set the container height property, Alpha Anywhere will automatically set the container height property to screen.height.
Videos
Understanding the screen.height Property
When setting the height of a container you cannot use percentages. However, you use the special screen.height variable to represent 100% of the available height.
In this video we show how a container's height can be set using the screen.height property.
- Watch Video
2018-08-03

Container ID

Specify a unique ID to identify the container. At run-time, the actual ID will automatically be converted to uppercase. If you want to include the component alias in the id, prefix the id '{dialog.componentName}'.

Container style

Specify the style for the container.

Container width

Specify the container width. Use CSS syntax. Example: 3in, 100px, 33%, etc.

Custom scroll indicator settings

You can customize the position and appearance of the scroll indicator that is shown when the container is scrolled.

Description

The description helps identify the container in the control list.

Drag scrolling axis

Specify the directions in which content scrolling is allowed.

Drag scrolling

Specify if the content of the container can be drag scrolled; for example when using a mobile device.

PanelOverlay bottom

Specify the distance of the overlay from the bottom edge of the Panel. If you specify a 'top' property as well, the overlay will be stretched.

PanelOverlay left

Specify the distance of the overlay from the left edge of the Panel. If you specify a 'right' property as well, the overlay will be stretched.

PanelOverlay right

Specify the distance of the overlay from the right edge of the Panel. If you specify a 'left' property as well, the overlay will be stretched.

PanelOverlay top

Specify the distance of the overlay from the top edge of the Panel. If you specify a 'bottom' property as well, the overlay will be stretched.

PanelOverlay is window

If the PanelOverlay is a window then it will only be shown when Javascript to show the window is executed. See Action Javascript action 'Show PanelOverlay Window'.

Prevent container float

By default all containers are set to 'float'. This option prevents the container from using the 'float' attribute in its CSS style. An example of when you might want to use this option is when the container has a client-side show/hide expression and the space taken by the container should be completely eliminated. When this option is checked, there will always be a break both before and after the container, regardless of the setting for the 'break' property in the corresponding 'Container End' item.

'Pull past end' settings and events

Specify if the user can drag the contents of the container beyond any of its boundaries. If enabled, the content will snap back to its natural position when the user releases, and 'pull' events, that you can define, are fired.

Spacing - above

Specify the space above the container. Use CSS syntax. E.g. 2in, 20px

Spacing - below

Specify the space below the container. Use CSS syntax. E.g. 2in, 20px

Spacing - left

Specify the space to the left of the container. Use CSS syntax. E.g. .2in, 20px

Spacing - right

Specify the space to the right of the container. Use CSS syntax. E.g. .2in, 20px

Stop drag scrolling event propogation

Specify if the scroll events should be forwarded to the parent container.

Sub-type

The container type. A container can be one of the following types:

Type: Description
None: A regular container used to group controls together.
RepeatingSection: Used in data-bound UX Components to create master-detail data structures.
PanelHeader: Contains controls that will be rendered in the header of a Panel Card, Panel Layout, or Panel Navigator.
PanelFooter: Contains controls that will be rendered in the footer of a Panel Card, Panel Layout, or Panel Navigator.
ControlGroup: Used with older styles, such as iOS. Applies a 'mobile friendly' styling to controls with in the container: removes the border from edit controls and adds a horizontal line between controls within the group. The ControlGroup is not supported for version 4 (e.g. 'Alpha') or newer styles as newer styles have built-in mobile support.
ButtonGroup: Used with the button control. Renders two or more buttons as a button group.
SpinListGroup: Used with Spin List controls. Renders multiple Spin List controls as a single control.
Alignment: Left, center, or right aligns the controls in the container.
Injectible Content: A special container used to render the controls inside the container in another location -- such as within a disclosure.
PanelOverlay: Used with Panels. Displays the controls in the container over the other Panels in the component.
Window: Displays controls in the container in a pop-up window.
FlexLayout: Dynamically sizes the controls in the container.
AbsoluteLayout: Explicitly positions the controls in the container. Often used with a background image of a form to position edit controls (e.g. text boxes) over fields in the image.
NoFloat: Eliminates the div element that typically wraps all controls in a component. All controls in a NoFloat container are rendered one per line.
EditorSet: Contains one or more Editor containers.
Editor: Must be placed inside an Editor container. Contains one or more controls used to edit fields in a FormView control.

Use CSS Flexbox

Container controls with a sub-type of 'None' allow the developer to set the content alignment to left, center, or right. If you select center or right, the way in which the content is aligned is done using CSS Flexbox. If you find that this option causes an unexpected change in your component's layout you can revert to the old method by unchecking the Use CSS Flexbox property.

Use CSS Flexbox is only available for containers with a Sub-type of 'None'.

Videos

Containers

In this video, we explain the various Container types available in a UX component.

Watch Video

Understanding the 'Prevent Container Float' Property

Or, "How to Eliminate Unwanted Vertical Space when a Client-side Show/Hide Expression Hides a Control."

(This video is aimed at advanced developers). When you use a client-side show/hide expression to show or hide a container, not all of the vertical space that is consumed by the container is removed when the container is hidden. This video explains how the Container's 'Prevent container float' property can be used to solve this problem.

Watch Video

Hiding Controls on a UX Component and Showing Controls in a Pop-up Window

This video shows how you can take certain controls on a UX component that would normally be visible when the UX component was run and hide them. When the user clicks a button to show the controls, the hidden controls are shown in a popup window. As shown in the video, all of the controls in a specified Container control are automatically hidden and only shown in the popup window on demand.

Watch Video

Fixed Position Content when Using Panels - 'PanelOverlay' Containers

Normally, all controls in a UX component are positioned "relatively". However, when using Panels, there may be situations where you would like some content to be positioned in a fixed position. This is easily achieved by placing the content into a Container and then setting the container type to "PanelOverlay".

A "PanelOverlay" always "floats above" the rest of the content on the screen and has a fixed position relative to the top, left, bottom, and right of the visible Panel.

Watch Video

Drag Scrolling in a Section of the Screen

Drag-scrolling is central to mobile applications. A common design requirement is to display long content in a scrollable section of the screen.

In this video, we show how you can put content in a Container control and then turn on drag-scrolling for the Container.

Watch Video

Displaying Pop-up Windows and Overlays Using the 'Window' Container Sub-type

Displaying content in pop-windows (also sometimes called "overlays") is a common requirement in web and mobile applications. This is easily done by wrapping the content you want to show in the popup window in a container with a sub-type of "Window".

In the first video, we show several examples of how this technique is used to show popup lists, maps, and forms (Note: In addition to the techniques shown in this video, you can also use the "Open a popup Ajax Window/Overlay" action in Action Javascript to display content in popup windows).

In the second video, we contrast the technique shown in this video with the "Open a popup Ajax Window" action in Action Javascript.

Download Component

Responsive Design - Dynamically Resizing Controls on Orientation or Window Size Change - Understanding the 'FlexLayout' Container

A common design requirement for a UX component is for controls to dynamically resize when the screen size changes -- either because of a device orientation change or the browser window resizing. This can be done easily in Alpha Anywhere using the 'FlexLayout' container.

Controls in a FlexLayout container can be configured to have a width that is defined 'relative' to other controls in the container. In this video, we explain how to use the FlexLayout container.

Watch Video

Positioning Controls at Absolute Locations on the Screen using the WYSIWYG Builder - Understanding the 'AbsoluteLayout' Container

By default, the UX component lays out controls placed on the component automatically, 'flowing' the controls from left to right, top to bottom. All controls are perfectly aligned. However, here are time when you need more precise control over the placement of controls. This is especially true when you want to align controls to a background image (such as an image of a PDF form).

In this video, we show how you can use the AbsoluteLayout container to set the absolute position and size of controls in a UX component.

Watch Video

Understanding the 'NoFloat' Container Sub-type

By default, all controls in a UX component are wrapped in a DIV with a class name of A5CWLayout. This class adds a CSS float and padding so that the controls 'flow' automatically left to right, top to bottom, across the screen. If a control has a 'break' after it, a new 'line' is created. This automatic layout of the controls on a UX component makes it easy to design attractive, perfectly aligned forms.

However, if the padding that is automatically added to the controls is getting in the way of the effect you are trying to achieve, you may want to use a special 'NoFloat' container instead of a standard Container.

Watch this video to learn how the 'NoFloat' container works.

Watch Video

Alignment Container

The Alignment container makes it easy to Left, Center, or Right align a set of controls on a UX component.

Watch Video

Understanding the screen.height Property

When setting the height of a container you cannot use percentages. However, you use the special screen.height variable to represent 100% of the available height.

In this video, we show how a container's height can be set using the screen.height property.

Watch Video

2018-08-03