LorisLombardo87 / qs-side-menu

a filters menu
Other
8 stars 11 forks source link

Fix to the Issue after Qlik Sense Update and Few Enhancements #13

Open shyambutani opened 3 years ago

shyambutani commented 3 years ago

### Issues: Issue 1: Filters does not appear after the new QS Upgrade(Reported cases of malfunctioning in November and February Version). Only a button with 3 dots would appear. Issue: https://github.com/LorisLombardo87/qs-side-menu/issues/12

Probable Cause: Based on my understanding for some reason after the new QS version, when the QS engine tries to render the filters within the given area in extension, it somehow figures there isn't enough space available for rendering. Hence, it renders it in compressed form.

Fix: One of the earlier CSS property seems to be responsible for this behaviour. Earlier:

.qv-object .qv-inner-object { height: 34px !important; }

Now:

.qv-object .qv-inner-object { height: 100%; }

The above change was making the filters appear correctly. And to remove the white background colour between each filter within the group, I have added below piece of CSS property:

.qsSideFilterTarget .qv-object-content-container { background-color: #545352; }

But then the above property was not suitable when filters would be rendered in an expanded fashion, during a slow network when it would by default occupy space for 10 filters, irrespective of the number of filters in a group. So as the background colour is set to dark, the values of these expanded filters would not be visible. To fix this:

.qsSideFilterTarget .ng-scope .qv-filterpane-expanded .qv-object-content-container { background-color: rgb(255,255,255); }

Issue 2: When more numbers of filters were added in a single group, it does not render all and show expand all (3 dots) button at the bottom

Probable Cause: The below piece of logic was responsible for procuring the space so that each filter would fit within the area:

In qvSlidePanel.js

var b = 43 * a.childFilters;

This was occupying (34 px(Size of each filter)+9(Bottom margin after each filters)) * number of filters within a group.

Fix: Minor adjustment in the above logic:

In qvSlidePanel.js

var b = 44 * a.childFilters;

### Enhancement: Enhancement 1: Filter Heading text bold and underlined

Just slight modification in Style.css:

.heading{ color: white; width: 100%; text-align: center; font-size: 18px; margin-top: 5px; font-weight: bold; //New Enhancement text-decoration: underline; //New Enhancement }

Enhancement 2: Increased default space occupied during the slow network. Sufficient for 10 filters.

In qvSlidePanel:

var b = 440;
Mateotey commented 3 years ago

This was very helpful @shyambutani .. thanks for doing this work.. @LorisLombardo87 please merge

peachman1997 commented 3 years ago

Would be great to get these merged in