Set Sizing

Set Sizing is an action in the rule panel that allows you to dynamically change the width and height of a selected element (like a label, image, input field, etc.) at runtime based on an event (like button click or page load). This helps in making the UI more interactive and responsive.

Properties and Explanation

Here are the steps to follow in order to use the set Sizing action:

1

Select Element Id:

This property specifies which element on the page should be affected by the action. You choose the ID of the widget (like label, image, button, etc.) where the size change, content update, or styling will apply.

2

Box Sizing:

Box Sizing defines whether padding and border are included in an element’s total size. Content-box: Padding & border added outside. Border-box: Padding & border included inside. 🔗 Learn more

3

Minimum Size:

Minimum Size sets the lowest width and height an element can shrink to, preventing it from getting too small. 🔗 Learn more

4

Maximum Size:

Maximum Size sets the upper limit for an element’s width or height. It ensures that the element doesn’t grow beyond the specified size, regardless of screen size or content. 🔗Learn more

5

Overflow:

Overflow controls what happens when content exceeds the size of its container—whether it should be hidden, scrollable, or visible outside the box. 🔗 Learn more

6

Margin:

Margin defines the outer space around an element, creating distance between it and surrounding elements. 🔗 Learn more

7

Padding:

Padding defines the inner space between the content of an element and its border — it pushes content inward. 🔗 Learn more

Full Configuration Example

Below is a screenshot of the Set Sizing action configuration, showing all properties set for the Select Element id, Box sizing, Minimum size, Maximum size, Overflow, Margin and Padding:

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

Added a block container on the page. Using this action, you can assign specific sizing, and whenever a defined event (like a button click) occurs, the block container will resize according to the settings defined in the Set Sizing action.