Unwanted iFrame Borders Visible With Certain Themes

[gileswalker]

Hi All,

We have just moved to Qlik Cloud/SaaS, but also have a Qlik On Premise solution.  The issue I have is present on both platforms, and is regarding entire sheet iFrames, specifically re: unwanted borders that are presented by Qlik when certain themes are applied.  The issue is actually simple to see and test, but is an annoying oversight (in my opinion) by the current solution. 

When you are embedding entire sheet iFrames (by whatever means) if you use native themes of [Default] or [Sense Classic], what you see in the sheet iFrame is exactly what you see inside Qlik, and there is no issue. 

But if you apply [Sense Focus], [Sense Breeze], or [Sense Horizon], and in my case a "custom theme", each object within the screen iFrame gets surrounded by a thin outer border, which is totally unnecessary.  You can even see them on screen in the preview when you are preparing the iFrame.

Here is a simple example of the issue:

At (1) and (2) the border is obvious.  At (3) it is less obvious, but when you see the object under zoom, the same issue is there, for example:

I am working with a 3rd party on this topic also and they have confirmed that they can also see the same issue.  They have reported that using Google Chrome developer tools you can locate the code that sees this border width as 1px, and change it to 0px, and the border disappears.  This can be factored into (I believe) CSS code within the theme to 'manage the problem'.  Alternatives are that our web team need to code our site with some over-ride function to mitigate, but that is under review.

However I am firmly of the opinion that the instance of such a flaw in design (my opinion) is something that should be able to be easily be fixed by Qlik within a code release.  I'm not seeing any instances where seeing the additional border could be useful, and currently a new and very attractive set of dashboards and analytics is being spoiled by these unwanted borders.

Interested to see if any other users have found the same issue and whether anyone has any advice, or experience to resolve this.

Comments by Qlik Dev team also welcomed.

Regards

Giles

[Anil_Babu_Samineni]

@gileswalker The themes designed in this way, In case anything you need from product level, please submit an idea here: (1) Ideas | Qlik Community.

[Daniele_Purrone]

Hi @gileswalker , I agree with @Anil_Babu_Samineni that this might be a matter of theme design. But, at the same time, if the issue doesn't happen when not using iFrames, then it might be a matter that we need to investigate. So, you can start a chat with us mentioning this thread, and we'll see what we can do. The conclusion might still be that this is a design limitation, but we'll know for sure.
Please note that custom themes are not supported, but themes that come with the product/platform are.

[gileswalker]

Hi Daniele - your link took me to a page where the only chat function was with a Bot, and the Bot wouldn't connect me to a support person.

How am I able to chat properly with a person?

Regardless of if the theme is designed in this way, it doesn't make logical aesthetic sense, and our web designers have complained 

Thanks

[gileswalker]

So I reached out to Mike Tarallo based on the guidance in this video he presented with Alberto Vaghi regarding custom themes:

https://www.youtube.com/watch?v=uuVWqrww2s8&ab_channel=Qlik

Alberto from Qlik Italy has indicated that the issue is generated by the use of 'show cards' within the theme generator he built:

https://qsthemecreator.azurewebsites.net/

I have created mockup themes using the cards true/false functionality in the theme builder, along with other inbuilt CSS coding for removing white borders from cards (also a tool in the theme builder), and then used the mockup theme code to adapt my own custom theme.

The main change is in the JSON which was:

....and is now:

This has had the effect of removing the unwanted border from the objects in the iFrames, BUT the offset is now that other aspects of the iFrame are compromised.  For example, when viewed as an iFrame the natively grey background (visible in the Qlik GUI) has disappeared, and there is no discernable difference in the colour of the sheet background, and the colour of the chart background in the iFrame.

Example of the GUI (small screen grab):

Example of the same real estate viewed as an iFrame - note the grey has disappeared:

When the "_cards" : true, the grey sheet background is visible in the iFrame.  There are other negative/unexpected visual effects within the iFrames also, like title text gets very close to the edge of objects, footers are suddenly italic, and footer border is removed.

CSS coding for removing white borders from cards seems to have no effect to the iFrame outcome, whether coded as:

.qv-card.printing-live-card .printing-live-content .qv-object-wrapper .qv-object, .qv-client.qv-card #qv-stage-container #grid .qv-object-wrapper .qv-object, .qv-client.qv-card .qv-story-sheet .sheet-container #grid .qv-object-wrapper .qv-object { border: 0px; }

.....or.....

.qv-card.printing-live-card .printing-live-content .qv-object-wrapper .qv-object, .qv-client.qv-card #qv-stage-container #grid .qv-object-wrapper .qv-object, .qv-client.qv-card .qv-story-sheet .sheet-container #grid .qv-object-wrapper .qv-object { outline: 0px; }

So it seems that the JSON (and CSS) is applying itself mostly as expected in the GUI, but when picked up by the iFrame, what is visible is something different, and I can't figure it out. 

Any help is much appreciated

Rgds

Giles

[Daniele_Purrone]

Hi @gileswalker , please try again, you must have come in at a time when there was no-one available to answer chats. You should also be able to request the bot to create a support case for you.
If that doesn't work either, you can go to this link and create one yourself.