Skip to main content
Announcements
Global Transformation Awards! Applications are now open. Submit Entry
cancel
Showing results for 
Search instead for 
Did you mean: 
KommulaRahul
Contributor III
Contributor III

Borders to multi KPi using CSS

 

IMG_20231110_152536.jpg

 Pls look into the above pic. 

Instead of adding the borders to all the individual KPIS without gap, I want the borders to 2 KPIS each. And there must be gap between the KPIS. 

 In the above pic, there are 6 KPIS. 1. Total orders

2. Received 3. Shipped 4. Open 5. Picked 6. Packed

1. One Set KPI(total orders and received)

Like I want Total Orders and Received to be grouped together like total Orders in one box and received in one box .

2. Second Set KPI (Shipped and Open)

Again shipped and Open kpis must be grouped together like shipped in one box and Open in one box.

3. Third Set KPI (Picked and Packed)

Same goes with this Set also just like above.

Note:

There must be gap between the each set of kpi.

Labels (1)
13 Replies
ajaykakkar93
Specialist III
Specialist III

I think it is possible when I am back home I’ll give it a try 

Please mark the correct replies as Solution. Regards, ARK
Profile| GitHub|YouTube|Extension|Mashup|Qlik API|Qlik NPrinting

KommulaRahul
Contributor III
Contributor III
Author

Ok Ajay

KommulaRahul
Contributor III
Contributor III
Author

Any luck on that? 

ajaykakkar93
Specialist III
Specialist III

Hope this helps

ajaykakkar93_0-1700628933134.png

 

.qv-object-qsstatistic .ui.horizontal.segments>.segment:nth-child(odd):not(:first-child) {
border-left: 1px solid #a6a6a6 !important;
}

.qv-object-qsstatistic .ui.horizontal.segments>.segment{
border-left: 0px solid transparent !important;
}

Please mark the correct replies as Solution. Regards, ARK
Profile| GitHub|YouTube|Extension|Mashup|Qlik API|Qlik NPrinting

KommulaRahul
Contributor III
Contributor III
Author

I tried this one. 

But there was no  impact or change after adding this script in css section. 

Can u once upload the complete screen shot of that script

Which u added in ur Qlik workspace. So that i will look into it once. 

 

ajaykakkar93
Specialist III
Specialist III

As you can see it does work for me. can you share your settings did in appearance tab 

Please mark the correct replies as Solution. Regards, ARK
Profile| GitHub|YouTube|Extension|Mashup|Qlik API|Qlik NPrinting

KommulaRahul
Contributor III
Contributor III
Author

Ya okay

Pls look into the below pics. 

The same script which u shared with me has been replicated here. 

 

IMG_20231123_072147.jpg

IMG_20231123_072328.jpg

IMG_20231123_072624.jpg

ajaykakkar93
Specialist III
Specialist III

Not this one, config done for dimension & measure in appearance tab 

 

Please mark the correct replies as Solution. Regards, ARK
Profile| GitHub|YouTube|Extension|Mashup|Qlik API|Qlik NPrinting

KommulaRahul
Contributor III
Contributor III
Author

I haven't done any configuration in the dimensions and measure section. Anyway have a look into the below pics

IMG_20231123_092553.jpg

IMG_20231123_092610.jpg

IMG_20231123_092627.jpg

IMG_20231123_092643.jpg