Automatic resizing of custom widgets

Custom widgets can be automatically resized during project run time in order to fit changing contents.

When you create a new custom widget, you specify a default size for that widget. And then when you insert a Custom Widget object into a project screen, you can manually resize it like you would any other screen object. Given the nature of a custom widget, however — it is an embedded container for an external HTML file — the configured size of the widget might be too small to display the entire contents of the widget.

To handle this, automatic resizing of custom widgets has been implemented. When a screen is opened during project run time, each widget in the screen is immediately resized to fit the current contents of its associated HTML file. (The configured position of the widget does not change; its top-left corner remains the same as when you inserted the object in the screen.) Then, if/when the contents of the HTML file change, the widget is resized again to fit the new contents. This is especially useful if the HTML file has been designed so that it dynamically updates throughout the project run time.

Please note the associated HTML file can be designed so that its contents change in size in any or all directions, not just to the bottom and right. The widget will still be resized to fit the contents, and this might appear to change the position of the widget but it does not; the actual position of the widget remains the same, as determined by its top-left corner, even though the contents appear to overflow it.

The following series of illustrations shows an example of a custom widget being resized as the contents change. The black frame represents the Custom Widget object as it was inserted into the project screen, and yellow-and-green pattern represents the contents of the associated HTML file.

Automatic resizing does not apply to custom widgets that are included in Linked Symbols. This is to prevent any disruption in the layout of the symbol.

Also, automatic resizing does not necessarily apply to custom widgets that are designed to display other webpages. This is because the webpages are typically displayed within an iframe element in the HTML file, and that element constrains the content of the webpages. The iframe element itself would have to change size in order to trigger the automatic resizing.

Tip:

By default, automatic resizing is enabled for all custom widgets. You can disable it on a widget-by-widget basis, however. To do this, edit the widget's associated JavaScript file (custom_widget.js) to include the following line:

_proxy.autoResize = false;

This change will apply to all instances of the same custom widget.

For more information about editing custom_widget.js, see Edit the web files for a custom widget.