Qlik Sense Mashup - Single Integration API

[rbartley]

Hi everyone,

Up until know I have developed mashups using the various mashup Capability APIs, but for more standard requirements, I thought I'd take a look at the Single Integration API.  

The page design includes a <div> with all non-Qlik HTML, including nav-tabs, and then a number of different iframes, all bar the first one being hidden when the page is loaded.  Everything seems to work well apart from sometimes, there is a glitch in the responsiveness when showing/hiding the different iframes.  The iframe begins to re-size, but then it stops and the selection bar takes up the whole width and I can no longer see the chart below, as per the screenshot below.

This freezing seems to occur more often (but not always) in Chrome, but not in IE, I've not tries in Firefox yet.

The iframes are set to 100% width and calc(100% - 60px) height.

Does anyone have any ideas?

[rbartley]

Looking further at the elements , I can see that the iframe size is ok, as is the selection bar size, but the individual selections bleed outside the hight allocated to the selection bar:

ok:

<div ng-repeat="column in columns" class="qv-filterpane-column ng-scope" ng-class="{ 'qv-fullscreen-hidden': $last && column.showAll && !object.expanded }">

nok:

<div ng-repeat="item in column.items" ng-class="{'qv-filterpane-collapsed': !item.expand, 'qv-filterpane-expanded': item.expand}" ng-style="{height: item.height}" tid="qv-object-filterpane.dimension" class="ng-scope qv-filterpane-collapsed">…</div>

and chart has not resized correctly:

nok:

<header qva-direction x-dir-setting="ltr" ng-show="object.hasFrame" class="qv-object-header" ng-class="{'thin' : !object.showTitles || ( layout.title === '' && layout.subtitle === '' && !object._inEditState )}" dir="ltr">…</header>

[rwunderlich]

I'm not sure if it exactly addresses your problem, but in a similar project I found that I needed to put a responsive bootstrap wrapper around the iframes like this:

<div class="row">

  <div class="embed-responsive embed-responsive-4by3">

    <iframe id= "sheetFrame" class="embed-responsive-item" style="border:none;"></iframe>

  </div>

</div>

-Rob
http://masterssummit.com
http://qlikviewcookbook.com
http://www.easyqlik.com

[rbartley]

Hi Rob,

Thanks for responding.  I tried your suggestion (see snippet below), but the issue still persists.  I have observed that the repainting/re-sizing seems to stick after I make a selection and then switch tabs (call show/hide on iFrmContainer1 or iFrmContainer2).  

<div style="width:100%;height:calc(100% - 60px);">
	<div id="iFrmContainer1" class="row">
	  <div class="embed-responsive embed-responsive-4by3">
		<iframe id= "iFrm1" class="embed-responsive-item" style="border:none;"></iframe>
	  </div>
	</div>
	<div id="iFrmContainer2" class="row hide">
	  <div  class="embed-responsive embed-responsive-4by3">
		<iframe id= "iFrm2" class="embed-responsive-item " style="border:none;"></iframe>
	  </div>
	</div>
</div>

When I call hide, no display space is allocated to the hidden element (which I expect) and so when I call show again, the browser has to calculate the space to allocate again.  When no new selections are made, this works fine since I assume there is some element of caching, but when I make a new selection, this causes Qlik to re-calculate and this seems to stick.  

Ultimately, the requirement is to allow switching of the displayed iframe.  I previously tried just using one iframe and changing the src attribute, but this leads to a delay when switching and so I discarded that approach.

Any ideas?

Regards,

Richard

[rbartley · Accepted solution]

In the end, I managed to resolve this by swapping hide (which completely removes the space allocated) for setting the height of the iframe container to 0px and then switching this back according to the tab selected.