topic Re: Need to modify CSS display parameters for Simple KPI extension too achieve large KPI with two column aligned smaller KPIs... in Integration, Extension & APIs

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

diagonjope — Fri, 13 Aug 2021 18:44:03 GMT

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:

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":

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é

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

Dennis_Jaskowiak — Thu, 15 Jul 2021 12:48:07 GMT

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 .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?

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

diagonjope — Fri, 16 Jul 2021 01:46:36 GMT

Thank you Dennis! You are a star!

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é

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

micheledenardi — Tue, 24 Oct 2023 08:14:19 GMT

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

Thanks