Skip to main content
Announcements
Qlik Introduces a New Era of Visualization! READ ALL ABOUT IT
cancel
Showing results for 
Search instead for 
Did you mean: 
Keitaru
Creator II
Creator II

Need Help: Multi KPI reducing whitespace

Hi I have just started using Multi KPI need help in reducing the space between 2 measures.
Right now its looking like this with this CSS. Need Help with figuring out how to reduce the whitespace

div[tid="UjgXn"] * {
padding:0 !important;
border-style: none !important;
}

div[tid="UjgXn"].value *{
padding:0 !important;
vertical-align: text-top; !important;
}

div[tid="UjgXn"].label*{
padding:0 !important;
}

Keitaru_0-1718242383673.png

 

Labels (3)
5 Replies
marksouzacosta
Partner - Specialist
Partner - Specialist

I'm a very advanced Qlik and CSS developer and I was never able to reduce the padding in Qlik charts. Will be nice to see if someone had figured that out.

Read more at Data Voyagers - datavoyagers.net
Keitaru
Creator II
Creator II
Author

I've tried all different CSS attributes nothing seem to work

gomeri
Partner - Contributor III
Partner - Contributor III

You need to find the class or identifier belonging to the single object containing number '27' and see its padding and margin attributes. If it is all "0" you also need to check the container that contains the percentage, in your case "-100.0%".

To do this, however, I recommend that you use Google Chrome's "Inspect" and with the console arrow point to the element you have created (example in screenshot).


Let me know if you are happy with it and if you can do everything I indicated above.

Thanks

gomeri_0-1718267037449.png

 

Giovanni O. D.
Keitaru
Creator II
Creator II
Author

Hi @gomeri,

based on your explanation i've found these..

Keitaru_2-1718271447420.png

Keitaru_3-1718271848709.png

So I've tried the following but nothing seems to be shifting

div[tid="UjgXn"] .ui.two.statistic. ui.one.normal.statistic. ui normal.statistic. value*{
padding:0 !important;
}

div[tid="UjgXn"] .ui.two.statistic. ui.one.normal.statistic. ui normal.statistic. span*{
padding:0 !important;
}

 

gomeri
Partner - Contributor III
Partner - Contributor III

Hi @Keitaru,

have you tried reducing the style property 'flex-basis' to 25% or something similar?

gomeri_0-1718357734530.png

 

it is necessary to understand how the two objects are inserted within the div block and how styles have been assigned to the two objects.

 

Alternatively, you can reduce the inner margins of the individual elements of the object using e.g. 'margin:--25px'

 

div[tid="UjgXn"] .ui.two.statistic. ui.one.normal.statistic. ui normal.statistic. value*{
padding:0 !important;
margin: -25px;
}

div[tid="UjgXn"] .ui.two.statistic. ui.one.normal.statistic. ui normal.statistic. span*{
padding:0 !important;
margin: -25px;
}

 

 

 

Giovanni O. D.