Related pages: resizeIframe, getPlatformDimensions
The following information only applies to the Online Banking platform. To implement this solution in another product may require a different approach.
In Tecton, the height of the <iframe> is kept in sync with the height of its content. However, there are scenarios where you may want an element to remain fixed to the top or bottom of the page as the user scrolls. This has introduced a challenge for developers.
While we may decide to expose this as a capability at some point, for the time being, we have architected a workaround that will work in environments where both the platform and the module are using at least version 1.37.0 of Tecton.
Since the <iframe> has the attribute scrolling="no", you are unable to enable scrolling on the <html> or <body> tags within your <iframe> content. So the first piece is wrapping all your HTML content in a separate element with scrolling enabled.
<div class="container">
<!-- YOUR PAGE CONTENT -->
</div>.container {
overflow-y: auto;
}From here, we need to write some Javascript that will help us determine how tall our <iframe> should be to enable scrolling without negatively impacting the user's experience.
tecton.connected.then(() => {
const fillAvailableSpace = async () => {
// Get the initial dimensions of the platform
const dimensions = await tecton.sources.getPlatformDimensions();
// Grab the container element that we will need to set a height on
const container = document.querySelector(".container");
// Determine if we're on tablet, and if so, get the height of the footer if it is present
const isTablet = await tecton.sources.canUser("device.tablet");
const footerHeight = isTablet ? (await tecton.sources.getPlatformDimensions(".footer"))?.height || 86 : 0;
// Figure out how tall we can make the iframe
const height = dimensions.innerHeight - dimensions.outletOffset - footerHeight;
// Set that height on the container element which will now scroll
container.style.height = `${height}px`;
};
// Calculate once the page is loaded
fillAvailableSpace();
// Recalculate when platform dimensions change
tecton.sources.platformDimensionsChanged(() => {
fillAvailableSpace();
});
});This makes use of the new ability for getPlatformDimensions (Docs) to return a DOMRect (MDN Docs) for any element on the platform, so long as you provide a valid selector.
Based on our testing, we have found that this method works effectively. However, we have encountered one minor drawback. In some cases, when a particular financial institution has a footer defined, it can affect the display of the module on desktop. While the module will fill the available space on the page, the outer portion of the application will still be scrollable to allow for the footer to become visible. Based on the feedback we have received, this behavior is not a significant issue, and it aligns with users' expectations.
If you run into any issues using the code above, please reach out to us. We've tested it on mobile and desktop with a variety of settings. While it worked as expected, there may be other details we need to consider.