Mashup - toolbar positioning scroll issue

[#1]

Hello,

I'm facing an issue with the chart toolbar rendering in Mashups: If you start scrolling the page, then the chart toolbar (the one with green tick and red cross) is moved on top of the chart - Also, lasso is not working properly (same issue, it's shifted from the real selection).

Step to reproduce (please also see images below):

- Add a chart to a Mashup (in my test starting from Simple Mashup with absolute positioning, example Mashup attached)

- View in browser without scrolling the page

- Toolbar is correctly displayed when clicking on the object.

- Now slightly scroll the page (reduce browser window height if necessary)

- Click on an object: The toolbar is displayed x pixel on top of the object

- If you scroll more, the space between the bar and the chart grows till the toolbar is no more displayed on the page.

CSS class seams to be: qv-selection-toolbar ng-scope sel-toolbar-card

(every time the toolbar is displayed it assume a different "top: XXXpx" css property)

the div seams generated dynamically by qlik.js http://localhost:4848/resources/js/qlik.js

Any suggestions on how I can fix this?

Many Thanks.

Marco.

[#2]

You'll get it in the next release

Anyway I'm 30 min. away (Vellinge) if you need help with something

Whas this of any use to you Marco Benedetti?

Best regards

Thomas

[#3]

Hi Thomas,

Thanks for your work on that but I still have an issue.

It seams that the scroll event doesn't trigger so it keeps the bar at its place on the window.

After some research, I found that the client.css required for QS object blocks the scrolling event.

I actually don't know how a css file can do that but I put this code to check the scroll event:

<script>

     $(window).scroll(function () { 

            console.log("scrolling");          

    });

</script>

So with client.css nothing happens. If I comment client.css, I can see the log in the console but obviously I don't have any QS object.

Do you have the same behaviour?

Best regards,

Ben

[#4]

Hi Banjamin

I know there is issues with the client.css and that's why I use $('body').scroll(function() {}) instead. I use the css attribute "overflow-y: scroll" on the body.This gives you the advantage of a more modern scrollbar

I really hope that Qlik corrects all these minor error with their next release.

Please let me know if there is anything I can do to help.

Best regards

Thomas

[#5]

Hi marcobenedetti‌

If any of the answers above has helped you with your problem, please mark them as "answers"

Best regards

Thomas

[#6]

Hi Thomas,

Unfortunately, I've tried with the listener on body but it still doesn't work...

I'm going to keep it like this right now and I really hope as well that it will be fixed very soon. It's a big roadblock for using mashup if you are not able to show this selection bar properly...

Thanks again for your help.

Best regards,

Benjamin

[#7]

Hi Benjamin

I figured it out.

1.

Load your css file after qlik's css:

    <link rel="stylesheet" href="https://community.qlik.com/resources/autogenerated/qlikui.css">

    <link rel="stylesheet" href="https://community.qlik.com/resources/assets/client/client.css" media="all">

    <link rel="stylesheet" href="[YOURCSSFILE].css">

2.

Put this in you css file:

html{

  overflow-y: scroll;

}

body{

  height: auto;

}

Because you load your css file after qlik, yours get loaded higher in the hierarchy. You have to set the HTML and BODY properties, otherwise they'll just inherit the properties from the client.css where HTML and BODY has 'overflow: hidden' and 'height: 100%'

This works for me. I catch the $(window).scroll event in my console.

Hope this helps

Best regards

Thomas

[Anonymous]

This is the code you will need to use to fix the issue (put this into your css file):

.qv-selection-toolbar

{

  position: absolute !important;

}

Answered here: Qlik Sense Mashup Issue - List Box Toolbar is not showing when making selections