When you embed an app in your website, a rectangular area (known as an iframe) is set aside for it. Here’s sample HTML markup used to embed an app:
<iframe seamless style="height: 480px; width: 320px; border: none;" src="https://connect.calcapp.net/?app=abc123"> </iframe>
style attribute above instructs web browsers to set aside an area with a
height of 480 pixels and a width of 320 pixels. You normally tweak these values
to set aside an appropriately sized rectangle for the app. If you make this
rectangular area unnecessarily tall, you’ll waste space and if you make it too
small, you’ll make your visitors scroll to reach all parts of your app.
Using unchanging width and height values works well for apps whose dimensions rarely if ever change. Such apps typically always display the same set of fields and have only one panel.
However, lots of apps routinely change their dimensions. Different panels often have different heights and lots of apps conditionally show fields, groups and text boxes using formulas. An app may appear to only have a single field when started, but displays more fields when information is entered into that first field.
For these apps, setting aside an unchanging rectangular area for the app is problematic, because you’ll waste space unnecessarily, which looks bad. What if your iframe could adjust its height dynamically based on the information actually displayed by your app?
With our latest release, it can. When you share an app, the Embed tab now tells you exactly how to enable the new auto-height feature:
The new embed tab is described in more detail in a separate post. If you want learn the nitty-gritty of how to use this new feature, read on.
Changing the height of an iframe dynamically
Add the markup in bold to the end of your <head> element to load the library:
<!DOCTYPE html> <html> <head> <title>My page title</title> <!-- The auto-height feature requires this library to be loaded. --> <script defer src="https://connect.calcapp.net/calcapp-iframe.js"> </script> </head>
(If you’re using a content management system like WordPress, you’ll need to jump through some extra hoops.)
If compatibility with older browsers, such as Internet Explorer, is important to you, use this markup instead:
<!DOCTYPE html> <html> <head> <title>My page title</title> <!-- The auto-height feature requires this library to be loaded, along with compatibility libraries. --> <script defer src="https://connect.calcapp.net/calcapp-iframe-polyfills.js"> </script> <script defer src="https://connect.calcapp.net/calcapp-iframe.js"> </script> </head>
Then, add the calcapp-managed-height attribute to your iframes to make the new library adjust the height automatically in response to users interacting with your app. Use markup like the following (note the new attribute in bold):
<iframe seamless src="https://connect.calcapp.net/?app=abc123" style="width: 400px; height: 560px;" calcapp-managed-height> </iframe>
You’ll need to specify an unchanging height even if you use the auto-height feature. This height will be used until the auto-height feature kicks in and adjusts the height when your page has been fully loaded. You can consider it an initial height, used during page load.
Did you notice the
defer attribute set on the
script element you added to
load the library? It’s there to prevent our library from making your page load
slower, by deferring loading of it until your page has fully loaded.
Constraining the calculated height
The auto-height feature also supports the attributes
<iframe seamless src="https://connect.calcapp.net/?app=abc123" style="width: 400px; height: 560px;" calcapp-managed-height calcapp-managed-height-minimum="200" calcapp-managed-height-maximum="800"> </iframe>
If you set the
calcapp-managed-height-minimum attribute, your iframe will
never be given a height smaller than this value. Similarly, if you set the
calcapp-managed-height-maximum attribute, your iframe will never be given a
height larger than this value.
Adjusting the calculated height
calcapp-managed-height-extra attribute specifies a value to add to the
<iframe seamless src="https://connect.calcapp.net/?app=abc123" style="width: 400px; height: 560px;" calcapp-managed-height calcapp-managed-height-minimum="200" calcapp-managed-height-maximum="800" calcapp-managed-height-extra="30"> </iframe>
(The value can be negative, in which case the value is subtracted from the calculated height.)
If your app is found to be 400 pixels tall and your
calcapp-managed-height-extra attribute is set to 30, our library will assign a
height of 430 to your iframe.
This can be useful for purely visual reasons, but we have found that it works particularly well to make animations look better. Let’s say that you have a switch field which, when toggled, shows a different field just below it. That field is shown with an animation, meaning that the app progressively gets taller over a period of, say, half a second.
The auto-height feature will automatically adjust the height of the iframe, which it also does with an animation. The problem is that due to the way iframes work, your app and the iframe probably won’t move in lockstep. That means that when your app grows by one pixel, it will take your iframe a little bit of time (tens of milliseconds) to keep up. In the interim, your iframe won’t be tall enough to fully accommodate your app, meaning that an unsightly scrollbar may appear on desktop computers, only for it to disappear a split second later, re-appear, go away yet again, and so on.
By adding a few extra pixels to the height, this unfortunate state of affairs can be prevented. You’ll need to experiment with this value to find one that works well for your app and your animations.
By default, our library adds 16 extra pixels to the height of your app. If you’d
like the height to precisely match the contents of your app, simply set the
calcapp-managed-height-extra attribute to zero.