Qlik Community

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Don't miss the upcoming Q&A with Qlik session on Qlik Application Automation on November 16th! REGISTER NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
jdiaz
Partner
Partner

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

Greetings!

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?

Cheers,

++José

Labels (1)
2 Replies
Dennis_Jaskowiak
Employee
Employee

Hi José,

I played a bit around and came up with this:

Dennis_Jaskowiak_0-1626353024248.png

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 .ui.one.statistics .statistic {
min-width: 80% !important;
}

.ui.one.mini.statistics {
position: absolute;
right: 5px;
width: 50% !important;
}

.statistic-1 .ui.one.mini.statistics {
top: 5px;
}

.statistic-2 .ui.one.mini.statistics {
top: 30px;
}

.statistic-3 .ui.one.mini.statistics {
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 .ui.one.mini.statistics {"

Does this help you?

jdiaz
Partner
Partner
Author

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!  

Cheers,

++José