topic Re: Qlik Sense - Gap between filters in App Development

Qlik Sense - Gap between filters

zjdoonj — Thu, 26 Aug 2021 20:24:53 GMT

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

Re: Qlik Sense - Gap between filters

Clever_Anjos — Thu, 26 Aug 2021 20:36:15 GMT

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

Re: Qlik Sense - Gap between filters

Clever_Anjos — Thu, 26 Aug 2021 20:36:36 GMT

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

Re: Qlik Sense - Gap between filters

zjdoonj — Thu, 26 Aug 2021 21:10:01 GMT

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?

Re: Qlik Sense - Gap between filters

Clever_Anjos — Thu, 26 Aug 2021 21:29:00 GMT

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

Re: Qlik Sense - Gap between filters

zjdoonj — Thu, 26 Aug 2021 21:54:05 GMT

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

Re: Qlik Sense - Gap between filters

Clever_Anjos — Fri, 27 Aug 2021 12:03:53 GMT

Add =1 as the measure for the multikpi

Re: Qlik Sense - Gap between filters

zjdoonj — Fri, 27 Aug 2021 12:13:56 GMT

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

Re: Qlik Sense - Gap between filters

Clever_Anjos — Fri, 27 Aug 2021 12:47:57 GMT

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; }

Re: Qlik Sense - Gap between filters

Clever_Anjos — Fri, 27 Aug 2021 12:56:09 GMT

And this would make the gap narrower

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

Re: Qlik Sense - Gap between filters

Clever_Anjos — Fri, 27 Aug 2021 13:02:45 GMT

Easiest way of know what classes you may change is using the browser inspector (F12 for Chrome).

Just point to the element and check which classes are available

Re: Qlik Sense - Gap between filters

zjdoonj — Fri, 27 Aug 2021 13:10:17 GMT

so lets say if we have 10 sheets we need to create Multi-kpi for every sheet? is there a way just one Muti-Kpi makes the changes to all 10 sheets?

Re: Qlik Sense - Gap between filters

Clever_Anjos — Fri, 27 Aug 2021 13:37:58 GMT

You can convert that KPI into a master item so you consolidate all changes in one object and add it to every sheet you want.

Another approach could be using a custom theme. Using a theme, all changes would be applied to every sheet of your app. Here you can find documentation on how to create and use it: https://help.qlik.com/en-US/sense-developer/May2021/Subsystems/Extensions/Content/Sense_Extensions/custom-themes-introduction.htm

Re: Qlik Sense - Gap between filters

zjdoonj — Fri, 27 Aug 2021 13:44:06 GMT

Can you update the code you provided for multi-kpi to have zero gap between the filters? because current code you provided still keeps small gap as shown in above screenshot. Please let me know if this can be achieved? Thanks so much

Re: Qlik Sense - Gap between filters

Clever_Anjos — Fri, 27 Aug 2021 13:48:47 GMT

Try playing as I mentioned using Chrome F12. I´m sure you can find more quickly a way to achieve what you want

Re: Qlik Sense - Gap between filters

zjdoonj — Fri, 27 Aug 2021 13:57:54 GMT

Actually I develop the apps in Qlik sense desktop and dont have access to edit in the hub so cant use f12 route. If possible to tweak the code you provided and have zero gap between filters that will be great. Thanks

Re: Qlik Sense - Gap between filters

Clever_Anjos — Fri, 27 Aug 2021 14:15:32 GMT

While your Qlik Sense Desktop is open, open https://localhost:4848/hub in your browser.

Re: Qlik Sense - Gap between filters

zjdoonj — Fri, 27 Aug 2021 14:26:38 GMT

sure, i will play around this. I have one more question if you could help?

I have 10 sheets in my qlik sense app. Is it possible to create a drop down button in qlik sense app so that if users click on the dropdown , he should be able to navigate to any of the sheet in the app?

Thanks for the help.

Re: Qlik Sense - Gap between filters

Clever_Anjos — Fri, 27 Aug 2021 14:57:13 GMT

There is a bunch of extensions here https://developer.qlik.com/garden

Search for "Navigation"
Maybe you gonna find one suitable for you

Re: Qlik Sense - Gap between filters

zjdoonj — Thu, 09 Dec 2021 13:56:34 GMT

Hi Anjos,

I used the above mentioned code but now I see a big gap at the bottom of the filter pane. How can we remove that? please see the picture: