The Column Container is a 12 column grid layout, where components can be organized into columns which alter their layout depending on screen viewport size. The container features three different breakpoints that it can switch between as the viewport changes. Each component inside the container stores positioning and sizing values per breakpoint, allowing you to determine the location and size of each component for each breakpoint.
A column container provides a way to create a single set of components that can be arranged up to three ways depending on the width of the container. Components are able change how many columns they span when switching between breakpoints, as well as change row and column index altogether. In the GIF below, the components are resizing and repositioning as the viewport on the container changes.
While deep selected, the Perspective Property Editor will show a Column Breakpoints interface. Clicking on Small, Medium, or Large will change the container workspace, showing you the current configurations for all child components in the container. When a container workspace is selected, you can freely move and resize components for the selected breakpoint, allowing you to determine their placement when the selected breakpoint is active in a session.
Note that switching between breakpoints in the designer does not resize the container. The pixel dimensions represent a minimum width for the viewport, meaning that the container will switch to the breakpoint when the minimum width is satisfied during runtime. For example, if Medium is set to 280px and Large is 500px, then the container will show the medium breakpoint when the viewport is between 280 and 499 pixels in width.
Width breakpoint declarations for child layouts. When the container is sized below minWidth, child position rules will fall back to the next set breakpoint rules.
Settings for the gutters, which are the amount of space, in pixels, to place between child components.
|style||Sets a style for this component. The Style menu contains all the tools for modifying text, background, margins, and borders. You can also specify a style class.||object|
Child Component Position Properties
When a component is placed inside of a column container, it will inherit the position properties listed below.
|height||Specifies the horizontal positioning of the component in pixels.||value: numeric|
An array of objects, where each object represents a different breakpoint. In the image below, a component in a column container is selected. Each element under breakpoints contains positioning information that will be used when the container switches to the named breakpoint.
Each object has the following values:
Returns an ArrayList, which contains references to all components inside of the container.
Array List - An ArrayList of components in the container. The resulting ArrayList can be iterated over via a for-loop.