If you're familiar with iframes, you're probably familiar with the fact that they don't handle dynamic height very well. In other words, when you use an iframe you have to define it's height, and it does not change based on the height of it's content.
This can be problematic. For instance, if I use the single configurator to embed a large pie chart, and define the iframe's height so that the entire pie chart is displayed without scrolling, if the pie chart shrinks in height on a smaller device it will leave extra empty space in the iframe. Another common time I run into this problem is when embedding mashups that are responsive with content that wraps on mobile, or with multiple views that have different heights.
You may run into this problem, too, when using the single configurator or embedding mashups, as I often do. What can you do about it?
Using Pym.js
Pym.js is a super useful library when dealing with iframes. With pym.js, your iframes will respond to the height of their content, making their integration into your page much more seamless by avoiding either extra empty space or inner-page scrollbars, and it's pretty easy to use, too!
So how do you actually use it?
Well, first thing to know is that pym.js must be placed on both the child site and the parent site, so if you'd like to use this with an object from the single configurator, for instance, you'll have to put together a quick mashup. Super simple. Let's do that as an example, and then you should be able to apply the same idea to any situation you'd like to use pym.js.
Step 1 - Add necessary code to your mashup
Require pym.js, and include var pymChild = new pym.Child()
require( ["js/qlik", "https://pym.nprapps.org/pym.v1.min.js"], function ( qlik, pym ) {
var pymChild = new pym.Child();
//rest of your code...
Step 2 - Override html and body height 100%
Qlik Sense mashups set html and body height to 100%, this will not work with pym.js. Just add the following css
html, body {
height: auto !important;
}
That's all that needs to be done in the mashup.
Step 3 - Embed mashup in website with pym.js
Include the following in your website to embed the mashup with pym.js
<!-- This adds pym.js to your page -->
<script src="https://pym.nprapps.org/pym.v1.min.js"></script>
<!-- This is the container for the frame -->
<div id="example"></div>
<!-- This is the pym.js method that adds the frame to the page. -->
<!-- Make sure the first param matches the container id, and the second param is the url to the mashup -->
<script>
var pymParent = new pym.Parent('example', 'example.html', {});
</script>
And that's it.
I've put up an example to show you the difference between using pym.js and not. This page https://demos.qlik.com/extensions/pym-example/iframe.html includes a large pie chart that is set to have it's width equal its height, and its width equal to 30% of the page, and is simply iframed in to fit nicely at full screen, but make the screen smaller and notice all the empty space between the pie chart and the "Some other content" string that sits outside of the iframe.
This page https://demos.qlik.com/extensions/pym-example/pym.html uses pym.js, and when you resize, the iframe height also adjusts, so that it's not taking up a bunch of unnecessary space.
.png "Former Employee"){kind=icon}