topic Re: Mashup - toolbar positioning scroll issue in Integration, Extension & APIs

Mashup - toolbar positioning scroll issue

Thu, 13 Nov 2014 17:01:16 GMT

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.

Re: Mashup - toolbar positioning scroll issue

Alexander_Thor — Sat, 15 Nov 2014 01:32:34 GMT

Hey,

Seems like a bug to me. I would go ahead and e-mail support@qlik.com and report it.

I have not seen this specific behavior before but I have seen similar issues caused by a scrolling page. Most likely due to the fact that the client.css is not adapted for scrolling.

Re: Mashup - toolbar positioning scroll issue

Wed, 26 Nov 2014 16:19:58 GMT

As a workaround I have tweaked the css with the following lines:

.sel-toolbar-card {

position: fixed!important;

}

This will render the toolbar in the proper position. If you scroll while the toolbar is still open this will not position correctly but if closed and reopened that will work.

Re: Mashup - toolbar positioning scroll issue

Fri, 03 Jul 2015 21:29:28 GMT

Hi Marco

I don't know if you stil have this problem but the fix is to apply the folloing to your css-file:

.qv-selection-toolbar{

position: fixed;

}

Please let me know if this helps.

Best regards

Thomas Petersen

Re: Mashup - toolbar positioning scroll issue

Aiham_Azmeh — Mon, 06 Jul 2015 05:47:07 GMT

Hi Marco,

As Alexander replied to you, It's a bug that has been already fixed in the next Qlik Sense version, so no need to report it.

And you're workaround seems to be just fine.

regards,

aiham

Re: Mashup - toolbar positioning scroll issue

Mon, 06 Jul 2015 12:43:50 GMT

Hi Aiham

I'm still having problems. Even with the newest version of Sense.

Any who, I made a fix:

CSS (nothing new, just like above)

.qv-selection-toolbar{

position: fixed;

}

$(document).ready(function (e) {

$('.qvobject').click(function (e) {

id = $(this).attr('id');

});

$('body').scroll(function() {

y = $('#'+id).offset().top;

$('.qv-selection-toolbar').css('top', y-40);

});

This will keep the selection-toolbar in the same place if the user starts scrolling the page.

Beste regards

Thomas

Re: Mashup - toolbar positioning scroll issue

Mon, 06 Jul 2015 13:14:05 GMT

Hi Aiham

I've solved the canvas problem for when using the lasso.

You just have to replace the JS-part of my code above with the following:

$(document).ready(function (e) {

$('.qvobject').mousemove(function (e) {

id = $(this).attr('id');

$('.selections-data-area-ui canvas').css('position', 'fixed')

$('.selections-data-area-ui canvas').css('top', y+40);

$('.qv-selection-toolbar').css('z-index', 0)

});

$('body').scroll(function() {

y = $('#'+id).offset().top;

$('.qv-selection-toolbar').css('top', y-40);

$('.qv-selection-toolbar').css('z-index', 0)

});

With this you can keep the selection-toolbar and the lasso in position is you scroll the page.

Hope it works for you.

Best regards

Thomas

Re: Mashup - toolbar positioning scroll issue

Mon, 06 Jul 2015 13:49:26 GMT

hello thomas,

very good - it works fine THANKS. but when you USE the lasso function than you have the same problem.

Re: Mashup - toolbar positioning scroll issue

Mon, 06 Jul 2015 14:47:14 GMT

Hmmm, I don't have any problems. Maybe it's a browser thing. I must admit I only tested it in Chrome.

As you can see (it's all in danish) I've scrolled midway to the page and the lasso and selection-toolbar is perfect.

Please let me know if I can help. Can you send me your js-file for starters?

Best regards

Thomas

Re: Mashup - toolbar positioning scroll issue

Aiham_Azmeh — Mon, 06 Jul 2015 19:48:40 GMT

Thomas,

I am really happy that you managed to solve this bug on your own with your workaround, and meanwhile also really sorry that this bug has not been solved sooner in the last release....

Please let me know if you further assistance.

regards,

aiham

Re: Mashup - toolbar positioning scroll issue

Tue, 07 Jul 2015 07:24:26 GMT

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

Re: Mashup - toolbar positioning scroll issue

Tue, 11 Aug 2015 00:08:42 GMT

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:

$(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

Re: Mashup - toolbar positioning scroll issue

Tue, 11 Aug 2015 09:02:50 GMT

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

Re: Mashup - toolbar positioning scroll issue

Tue, 11 Aug 2015 09:18:44 GMT

Hi marcobenedetti‌

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

Best regards

Thomas

Re: Mashup - toolbar positioning scroll issue

Tue, 11 Aug 2015 23:30:22 GMT

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

Re: Mashup - toolbar positioning scroll issue

Wed, 12 Aug 2015 07:33:56 GMT

Hi Benjamin

I figured it out.

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">

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

Re: Mashup - toolbar positioning scroll issue

Anonymous — Fri, 10 Mar 2017 15:10:00 GMT

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