Set Display & Alignment

Set Display & Alignment is an action in Rule panel which is used to dynamically control the visibility and placement of elements on a page. It allows you to adjust their alignment (such as left, center, or right) while also supporting various display types like block, inline, flex, and none. This action helps manage how components appear and behave in the layout based on user interaction or events.

Properties and Explanation

Here are the steps to follow in order to use the set Display & Alignment action:

1

Select Element Id:

This property is used to choose the specific element on the page (by its unique ID) that you want the action to apply to. It ensures that the display, alignment, or other changes affect the correct component.

2

Display:

Display is a property of the action that defines how the selected element will be rendered, using layout types like (Block, Flex etc). Learn more

3

Inline

1. Flex Grow: Controls how much a flex item expands to fill space. Learn more

2. Flex Shrink: controls how much a flex item can shrink when space is limited. Learn more

3. Flex Basis: sets the initial size of a flex item before space is distributed. Learn more

4

Flex:

1. Flex Direction: sets the direction of items in a flex container (row or column). Learn more

2. Flex Wrap: controls whether flex items stay in one line or wrap onto multiple lines. Learn more

3. Align Content: adjusts spacing between rows in a multi-line flex container. Learn more

4. Justify Content: aligns flex items along the main axis (horizontally by default). Learn more

5. Align Items aligns flex items along the cross axis (vertically by default). Learn more

6. Flex / Row Gap: sets the space between rows or columns in a flex layout. Learn more

Full Configuration Example

Below is a screenshot of the Set display & alignment action configuration, showing all properties set for the Select Element id and Display:

The screenshots above shows the complete configuration of the Set Display & Alignment action, including all relevant properties set up on the page.

A page contains a heading and a button. Using the event and condition setup, when the button is clicked, an action is triggered that changes the alignment of the heading based on the specified preferences in the rule panel.