How does Tecton manage the height of the iframe?

In Tecton, your module is rendered inside of an <iframe>. By default, the q2-tecton-sdk package does some work behind the scenes to keep the height on the <iframe> element in sync with the height of its content.

For example, when your module first renders, the total height of the content might be 800px. Tecton will capture that and emit a postMessage event from the <iframe>, where the platform is listening. It will then take that value and set it as the height on the <iframe> directly.

Here is an example of what the <iframe> may look like at that point:

<iframe 
  name="tectonRoute.MyExtension.Main" 
  title="Account Trends" 
  data-module-id="tectonRoute.MyExtension.Main" 
  scrolling="no" 
  style="overflow-y: hidden; height: 800px;"
></iframe>

However, what happens when the height of the <iframe> content changes? Well, Tecton is listening for those changes via a ResizeObserver and a resize event listener, upon which it will send another postMessage event, triggering the platform to update the height. It will do this as often as needed.

The reason we do this is to ensure that the platform is the one managing the scrolling of the page. It also conceals the presence of the <iframe> from the user and prevents the introduction of multiple scrollbars which can lead to a less-than-ideal experience.