Use Layout APIs

As an application designer or story developer, in addition to directly setting a widget's size and position in a parent container in the Styling panel, you can use layout related APIs to let viewers to dynamically set a widget's size and position according to the application or story logic and window size.

In some special cases, API calls will be ignored as they set invalid values:

Changing the height of widgets, such as dropdown, filter line, input slider, and range slider, won't take effect because they are read-only.
Different widgets have minimal width and height size differences. Input values smaller than the minimal size won't take effect.
Cannot set the size and position of a canvas. You can only get a canvas' current size and position (always {top: 0px, left: 0px}) and set them to a widget.

Related Layout script APIs are as bellow:

Code Syntax

LayoutUnit.Pixel // sets the unit of the layout as Pixel
LayoutUnit.Auto // sets the unit of the layout as Auto
LayoutUnit.Percent // sets the unit of the layout as Percent
LayoutValue.create(value: number, LayoutUnit: Unit) // sets the layout value by creating a value with a certain unit

getLayout(): Layout // gets the layout of a widget
Layout.getLeft(): Unit; // Returns the left margin between the widget that you define layout for and the widget's parent container.
Layout.setLeft(value: Unit); // Sets the left margin between the widget that you define layout for and the widget's parent container.
Layout.getRight(): Unit; // Returns the right margin between the widget that you define layout for and the widget's parent container.
Layout.setRight(value: Unit); // Sets the right margin between the widget that you define layout for and the widget's parent container.
Layout.getTop(): Unit; // Returns the top margin between the widget that you define layout for and the widget's parent container.
Layout.setTop(value: Unit); // Sets the top margin between the widget that you define layout for and the widget's parent container.
Layout.getBottom(): Unit; // Returns the bottom margin between the widget that you define layout for and the widget's parent container.
Layout.setBottom(value: Unit); // Sets the bottom margin between the widget that you define layout for and the widget's parent container.
Layout.getWidth(): Unit; // Returns the width of the widget that you define layout for.
Layout.setWidth(value: Unit); // Sets the width of the widget that you define layout for.
Layout.getHeight(): Unit; // Returns the height of the widget that you define layout for.
Layout.setHeight(value: Unit); // Sets the height of the widget that you define layout for.
 
// Application Canvas Resize Event, the event is cached to be dispatch every 500ms when the application window resizes.
Application.onResize() = function() {
};

Application.getInnerHeight() // If canvas' size is fixed, it returns the height of the canvas; if dynamic, returns the height of the viewport, the visible area of the window.
Application.getInnerWidth() // If canvas' size is fixed, it returns the width of the canvas; if dynamic, returns the width of the viewport, the visible area of the window.

Example

Add a table Table_1, a button Button_1 and two shapes Shape_1 and Shape_2 to the canvas or page. Write the script for Button_1 so that it can set table size to 600*400, and meanwhile set the top margin of Shape_1 to 60 px and the top margin of Shape_2 to 10 percent of its parent container:

Sample Code

Table_1.getLayout().setWidth(600);
Table_1.getLayout().setHeight(400);
Shape_1.getLayout().setTop(LayoutValue.create(60,LayoutUnit.Pixel));Shape_2.getLayout().setTop(LayoutValue.create(10,LayoutUnit.Percent));

If you set the canvas or page’ size to dynamic, after you click the button and resize your window, the top margin of Shape_1 will stay as 60 px while the top margin of Shape_2 will automatically fit to new size of the window.

Example

When the application or story's canvas size is dynamic, write the script for the onResize event to make the size of Table_1 automatically adjust to the size of the window whenever you resize the window.

Sample Code

var ResponsiveHeight = Application.getInnerHeight().value;
var ResponsiveWidth = Application.getInnerWidth().value;

Table_1.getLayout().setHeight(ResponsiveHeight);
Table_1.getLayout().setWidth(ResponsiveWidth);