Mashup Text Resizing Issue from Changes to Qlik Sense CSS in September 2017

tgonzalez1 — Mon, 27 Nov 2017 16:46:59 GMT

Hello Qlik aficionados,

I've been working on a Sense Mashup on a server running Sense 3.2.2. In the near future, the version of Sense running on the server will be updated.

Through testing on my local environment, running September 2017, I've noticed changes in the Qlik Default CSS that affects the sizing of specific objects (namely text-image objects). It appears to me, that with the September 2017 version of Qlik Sense the text size of values in a text-image object are tied to the object's pixel height within the browser window - so if a browser window is resized, the text size of the object will also change. In Sense 3.2.2, this was not the case, the text size of a text-image object would not change with the browser window (if a page were resized, the text size would not change).

From my understanding this is specifically related to the object class that is assigned (which properties are defined in the CSS).

In Sense September 2017, the class in question is: "class="qv-media-tool-html ng-binding responsive-images responsive-text qv-interactive bp-1".

In Sense 3.2.2, the same section of code used the class: "class="qv-media-tool-html ng-binding responsive-images responsive-text qv-interactive".

It appears this bp-X (the value of the number will change depending on the size of the window), is what is causing the text to resize with the window.

I would like to be able to maintain the behaviors of 3.2.2 following the server's upgrade (text size does not change when window is resized).

Is there anyway I can disable the object-resizing functionality present in Sense September 2017-On?

What kind of changes would I need to make to do so?

A very big thank you to anyone who can assist!

Re: Mashup Text Resizing Issue from Changes to Qlik Sense CSS in September 2017

_jespers_ — Tue, 28 Nov 2017 07:35:29 GMT

Hi Tom,

I don't know about any way to disable this feature, but according to me it sounds like the easiest way to "disable" this is to add your own css for these classes to overwrite them (if it's not an infinite number of bp-X classes).

Inspect on what level the bp-X class is being set, eg:

.qv-media-tool-html.responsive-images.responsive-text.bp-1

And then just add what font-size you want to use for the levels:

.qv-media-tool-html.responsive-images.responsive-text.bp-1,

.qv-media-tool-html.responsive-images.responsive-text.bp-2,

.qv-media-tool-html.responsive-images.responsive-text.bp-3,

.qv-media-tool-html.responsive-images.responsive-text.bp-4,

.qv-media-tool-html.responsive-images.responsive-text.bp-5{

font-size: 13px;

}

Perhaps not the best solution, but it will probably do what it is suppose to do.

topic Re: Mashup Text Resizing Issue from Changes to Qlik Sense CSS in September 2017 in Integration, Extension & APIs

Mashup Text Resizing Issue from Changes to Qlik Sense CSS in September 2017

Re: Mashup Text Resizing Issue from Changes to Qlik Sense CSS in September 2017