Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Francis_Kabinoff
Employee
Employee

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.

15 Comments
Francis_Kabinoff
Employee
Employee

@didierodayo if you describe how you're embedding the chart (iFrame code, viz api, nebula.js), and what the challenge you're having is, I might be able to help.

196 Views
didierodayo
Partner
Partner

@Francis_Kabinoff  Hi Francis.

I am just using the tab feature in Salesforce and embeding the URL as shown below. But depending n the screen the sheet doesn't adjust and we end up with 2 to 3 lines as below. Any ideas what might help?

URL

didierodayo_0-1638773798607.png

 

Salesforce Tab

 

image.png

 

Height issue

didierodayo_6-1638773932716.png

 

 

174 Views
rarpecalibrate
Contributor III
Contributor III

Hi @didierodayo ,

If you using a  theme, you can add the following to the theme.css file:

div.single-object #content {
   padding: 0 !important;
}

If you are not, you can add the same code to the multi kpi extension -> Appearance -> Styles and then inside Styles (CSS).

Ryan Arpe

146 Views
didierodayo
Partner
Partner

Thanks @rarpecalibrate  I will try that.

0 Likes
110 Views
newuser
Creator
Creator

@Francis_Kabinoff can you give a complete example of the full code implementation if using a SharePoint web part? There are a few places I'm unsure where to add. For example, I've tried this below but hasn't worked. This is all in the same SharePoint web part. I know there are some pieces missing, but I wasn't sure how to implement them.

<script type="text/javascript" src="https://pym.nprapps.org/pym.v1.min.js"></script>
<script>
    var pymChild = new pym.Child();
</script>

<iframe src="https://url" style="border:none;width:100%;height:100%;"></iframe>



 

0 Likes
43 Views