trackContainerResize
Determines the container sizing if the component needs to react. Component will get allocatedWidth or allocatedHeight if the input is true..
When you call the trackContainerResize(true) method, the context.mode.allocatedWidth and context.mode.allocatedHeight will be provided inside the updateView method of the code component. The values of these properties are different depending on where the code component is hosted. A value of -1 indicates that the code component can set CSS Style rules to fill the available space as required.
The following table shows the values of allocatedWidth and allocatedHeight in the different combinations of host and code component lifecycle methods.
| Host | Lifecycle Method | allocatedWidth |
allocatedHeight |
|---|---|---|---|
| Model-driven and canvas apps | init |
-1 | -1 |
| Model-driven apps | updateView |
-1 if trackContainerResize(false) or width in pixels if trackContainerResize(true)The width will change as the browser window is resized and the form adjusts to the space available. |
-1 |
| Canvas apps | updateView |
Set by the app maker. Can change dynamically if the width is set to a Power FX formula. |
Set by the app maker. Can change dynamically if the width is set to a Power FX formula. |
Note
In the test harness (started using npm start), the allocatedHeight and allocatedWidth will be returned as strings rather than numbers. When no value is provided, they will return an empty string rather than -1 or undefined. Additionally, once the width or height is set, you cannot undo the changes without refreshing the browser, instead a blank value will be interpreted as a size of 1.
In general, model-driven apps do not constrain the height and width of a component, so tracking the container size is not necessary. Instead, the code components can grow to use either 100% of the space for grid components, or to a specific height required by the contents when rendering a field component. In canvas apps, however, the parent context always provides the height and width to the component by nature of the drag-and-drop editor.
The following table shows the strategies that you can use to control the height and width of your controls HTML contents:
| Host | Code Component Type | CSS Height Size Strategy | CSS Width Size Strategy |
|---|---|---|---|
| Model-driven apps | dataset |
height: "100%" |
width: "100%" |
| Model-driven apps | field |
Grow up to a maximum height (The hosting form will also grow to accommodate). |
width: "100%" |
| Model-driven apps | field (full screen mode) |
height: "100%" |
width: "100%" |
| Canvas apps | dataset & field |
height: allocatedWidth |
width: allocatedHeight |
| Canvas apps | dataset & field (full screen mode) |
height: "100%" |
width: "100%" |
If the values of allocatedWidth and allocatedHeight change after the first updateView is called, then a subsequent updateView is called with "layout" added to the context.updatedProperties. More information: UpdatedProperties.
Available for
Model-driven apps, canvas apps, & portals.
Syntax
context.mode.trackContainerResize(value)
Parameters
| Parameter Name | Type | Required | Description |
|---|---|---|---|
| value | Boolean |
Yes | True if controls need to track container size, component will get allocatedWidth or allocatedHeight. |
Related articles
Mode
Power Apps component framework API reference
Power Apps component framework overview