Container Layouts
Learn about Absolute position and Vertical stack layouts for containers/sections in Editor
Kirsten Stevens avatar
Written by Kirsten Stevens
Updated over a week ago

In Editor, you can create containers to style and group other widgets within the container.  The container widget is unique in that it can parent, or contain, other widgets.  

By default, the layout for a container is set to Absolute position.  This means that the position of any child widget within the container will remain fixed according to its layout and position settings.

Absolute position

When Vertical stack is selected, all child widgets in the container widget align to the far left of the section. The layout and position settings are disabled for all child widgets within a container with Vertical stack applied.

Vertical stack

Leveraging the Vertical stack layout allows you to easily prototype functionality like:

The layout for a container can be updated from the Format > Setting tab. 

Leveraging Vertical stack layout in containers

Vertical stack layout can be applied to containers.  With a container selected, access the Format > Settings panel and update the Layout option from Absolute position to Vertical stack.

The position and layout of any child widgets within the container will be disabled on change to Vertical stack. Any new widgets placed within the container will automatically align to the topmost, leftmost position available, with every widget stacked one on top of the next in a column. To swap the placement of any widget within the column, you can either drag and drop the widgets within the container or drag and drop widgets in the Outline panel.

Drag in Editor

Drag in Outline

Note: As you show/hide widgets within the container with Vertical stack layout applied, the remaining visible widgets will automatically reposition to fill the empty space. Depending on the placement of the widget and whether or not it is shown or hidden, the other widgets will move to adhere to the Vertical stack layout.

For example, below you'll see the interface displayed when all widgets are visible. 

All Child Widgets Visible

Below, you'll see how the Purple and Red Sections are repositioned to fill in the Blue Section's space in the Vertical stack when the Blue Section is hidden.

Hidden Child Widget

If you have any questions, feel free to contact us at support@irise.com or check out the support portal at support.irise.com. You can also reach a member of support by using the 'Chat with us' button at the top right of your Definition Center interface. 

Did this answer your question?