Skip to main content
Live today at 11 AM ET. Get your questions about Qlik Connect answered, or just listen in. SIGN UP NOW
Showing results for 
Search instead for 
Did you mean: 
Partner - Creator II
Partner - Creator II

Need to modify CSS display parameters for Simple KPI extension too achieve large KPI with two column aligned smaller KPIs...


I am trying to use the Simple KPI extension to handle 3 measures per line, in order to achieve multiple instances of this KPI combo per visualization:

01-Imagen de indicador con tres medidas que queremos lograr usando Simple KPI.jpeg

I have tried to manipulate the parameters of the CSS rules of the visualization, but I can not find a way to align the two smaller KPIs on top of each other.  Bellow I am including a couple of images of results after messing with the align-self parameter, using the flex-start and flex-end values, and then changing to grid the value of the display parameter for class="ui three statistics":

10-Simple KPI using align-self to align small KPI images.PNG11-Simple KPI after changing container display parameter to grid.PNG

Closer, but still not what I want.

Has anybody tried this before?  If so, what did you do to make it work?  Even better, do you know of another free extension that can do what I want.

@alex_nerush, @Dennis_Jaskowiak  can any of you please advise or suggest alternatives?



Labels (1)
3 Replies

Hi José,

I played a bit around and came up with this:


for this, I used a very fixed CSS definition. To make it flexible you need to add media-queries.

This is what I have used:

.qv-client.qv-card #qv-stage-container #grid .qv-object-wrapper .qv-object-qlik-multi-kpi .qv-inner-object{
padding: 0 !important;

.qv-object-qsstatistic .top-aligned-items {
overflow: hidden !important;

.top-aligned-items {
background: #637C92!important;

.qv-object-qsstatistic .statistic {
min-width: 80% !important;
} {
position: absolute;
right: 5px;
width: 50% !important;

.statistic-1 {
top: 5px;

.statistic-2 {
top: 30px;

.statistic-3 {
top: 55px;

The "side-kpis" are size mini to differentiate them from the main kpi. The main kpi is small. After that I used position absolute to control the positioning. You can address each kpi by using ".statistic-1 {"

Does this help you?

Partner - Creator II
Partner - Creator II

Thank you Dennis!  You are a star!

15-After changes suggested by Dennis.PNG

I am not getting exactly what I want, but it is close enough to hack on it until we get it.  I guess the difference is that I have one "Large" and two "Mini" measures per KPI group in the flow.

BTW, is there any documentation (other than the CSS files themselves) about all the classes used in the Qlik CSS?  I am trying to understand the structure of the objects like in the .qv-client.qv-card #qv-stage-container #grid .qv-object-wrapper .qv-object-qlik-multi-kpi .qv-inner-object path you referred to in your CSS rules.

Finally, I tried your Advanced-KPI extension, but for some reason I couldn't get it to display correctly in Android or IOS.  Otherwise I would have used it for this use case.  It is really nice.  The Master Class video is also very useful.  Good work!  




Specialist II
Specialist II

Dear all, i'm trying to obtain something simiral, can you please share the QVF with this solution?


Michele De Nardi
If a post helps to resolve your issue, please accept it as a Solution.