Qlik Community

Qlik Sense App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
Coming your way, the Qlik Data Revolution Virtual Summit. October 27-29. REGISTER
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Creator
Creator

Multi KPI Styles CSS seems a little too powerful

Playing with this little box is both amazing and very confusing. It seems like anytime the multi KPI object loads on a sheet, you're able to throw in CSS that affects anything. Since it apparently allows you to choose a class/id to edit, rather than confining you to editing only the element in question.

I'm concerned that this is not the way they meant to implement this. While I'm thankful for the power this brings, I don't see how one option in one object type should give someone the ability to mess with the CSS affecting any other parts of the page.
In addition, without an html id or class specific to the element you're working on (this Multi KPI), it doesn't seem possible to add CSS that will directly affect ONLY the object you're adding the CSS to.

as a quick example... something like this would affect the text at the top of the default qlik sense navigation bar:
.lui-tab__text{
color:red !important;}

my best guess is that the idea was to take whatever css you put in the styles box and apply that to the current object's id. Not allow you to declare any class/id to alter. But I couldn't find a unique ID inspecting the page on developer mode.

Any thoughts on how this nifty little feature should be used?

1 Reply
Highlighted
Creator
Creator

Update:
I was able to find a unique ID moving up the element hierarchy in the page HTML using developer mode on chrome. 
With this, I could then edit pieces of this Multi KPI without affecting other objects.
3-27-2019 8-40-32 AM.jpg

In the example pictured, I was able to expand the gap between the first and second row of KPI objects. By default, the values were all evenly spaced, giving it a "smashed together" look.

#css-MwpZNn .statistic-4, #css-MwpZNn .statistic-5, #css-MwpZNn .statistic-6 {
margin-bottom:20px;
}