Qlik Sense - Gap between filters

[zjdoonj]

Hi Friends,

I created few filters in qlik sense app and placed them vertically in filter pane. There is a small gap between each filter and my requirement is to remove that gap. Is that possible? please see picture below.

Thanks for the help.

Regards

[Clever_Anjos]

Add a multi-kpi to your sheet use this code below in "Styles" from that object

.qv-filterpane .qv-filterpane-collapsed, .qv-filterpane .qv-filterpane-expanded {
margin-top: 0px;
}
.qv-object-qlik-multi-kpi { display:none; }
.qv-mode-edit .qv-object-qlik-multi-kpi { display:flex; }

[Clever_Anjos]

More information here https://www.youtube.com/watch?v=9lhL3Nrel5Q

[zjdoonj]

Hi Anjos,

Multi-kpi only accept one dimension and I have almost 15 dimension to create filters. Can please explain a bit more how remove the space between filter objects and if it is possible in the app? or this is some thing achievable via customization?

[Clever_Anjos]

No, keep your filter as it is now.

Add a multikpi with =1 as expression and add that code to the style and see the magic happening.

You will be injecting CSS code into your sheet. You can play with every object you want

[zjdoonj]

I did as you mentioned but nothing happened. Please see below screen shot. I still see space between the filters.

[Clever_Anjos]

Add =1 as the measure for the multikpi

[zjdoonj]

Yes but this doesnt remove the gap completely and there is still a small gap attaching the screen shot. Can we remove the gap completely?and also  how to hide the multi-kpi from sheet because my user dont want to see this extra component? Thanks

[Clever_Anjos]

This will hide the kpi when you are not in edit mode 

.qv-object-qlik-multi-kpi { display:none; }
.qv-mode-edit .qv-object-qlik-multi-kpi { display:flex; }

[Clever_Anjos]

And this would make the gap narrower

.qv-collapsed-listbox .qv-state-count-bar {
height: 0px;
}