Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
FabianF
Contributor II
Contributor II

CSS code in Multi KPI not working anymore (May_2021_Release)

Hello,

since we installed the May_2021_Release the css code in our Multi KPI visualizations is not working anymore.

The following is used for the styles and worked properly. I would be glad if someone can help me here, since I am no expert in creating css code.

 

@import url(" https://use.fontawesome.com/releases/v5.10.1/css/all.css ");


& *{
border-width: 2px;
border-color: #217217217;
overflow: hidden;
}
& .value {
font-family: Helvetica, Arial, Geneva, sans-serif;
}
& .label {
font-family: Helvetica, Arial, Geneva, sans-serif;
}

Labels (2)
5 Replies
mthernandezg
Contributor II
Contributor II

We just installed the same version and are facing the same issue.  Have you found any solutions?

I found this link similar to this situation, but it is from an older version, not sure if someone has figured out how to fix this?

https://community.qlik.com/t5/Knowledge/CSS-styling-in-Multi-KPI-extension-stops-working-after-Qlik/...

FabianF
Contributor II
Contributor II
Author

Hello Mthernandezg,

after a lot of trying the following way works for me:

1. Get the id of the object you want to change. To do so, add "/options/developer" to your url. After reloading the page rightclick on the  corresponding object and leftclick "Developer" to geht your objectID. 

FabianF_0-1631165801792.png

2. Go to the "Styles (CSS)" box of your Multi KPI and add your CSS there. Replace the "& *" with your objectID "div[tid="YOUROBJECTID"] *

3. Add "!important;" after every property to override any other or default property.

Maybe this example helps you a bit more than my description:

 

@Import url(" https://use.fontawesome.com/releases/v5.10.1/css/all.css ");

div[tid="LNLCJY"] * {
border-width: 2px;
border-color: #217217217;
overflow: hidden !important;
}
div[tid="LNLCJY"] .value {
font-family: Helvetica, Arial, Geneva, sans-serif !important;
}
div[tid="LNLCJY"] .label {
font-family: Helvetica, Arial, Geneva, sans-serif !important;
};

 

 

Tooor
Contributor II
Contributor II

Great reply!

jbhuck
Partner - Contributor
Partner - Contributor

Hi,

Thanks for this answer.

We upgrade QS with Nov 21 version. We have the same problem.

It works good with "generic" tag like ".value", ".label".

But we used  .statistic-1 property.

And it doesn't work anymore (e.g. below).

Do you a solution for that ?

 

div[tid="9ddac5a1-3b2c-4e66-abf3-25e8aff43e35"] .statistic-1 .value * {
font-size: 48px; !important;
}

div[tid="9ddac5a1-3b2c-4e66-abf3-25e8aff43e35"] .statistic-2 .value * {
font-size: 12px; !important;
}

Ken_T
Specialist
Specialist

did anyone ever log a ticket with qlik on this? any updates?