Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

Ensure Correct Positioning of Selection Toolbar in a Mashup

A small quirk I have experienced while working with the Qlik Mashup API is that the selection toolbar “floats away” from its corresponding chart the further the page is scrolled down.

toolbar_correct.pngtoolbar_floating.png

This isn’t a problem if your page does not scroll, or if you position all of the charts with absolute positioning, the default positioning if you use the default mashup template, but if your page scrolls and you are not using absolute positioning on the charts, then you will likely run into this problem too when creating a mashup.

An easy fix for this is to create a container div for all of the page content, set its height equal to the body height, and move the overflow property from the body tag to the container div tag. Let’s walk through this.

First, let's wrap our content in a container div, remove any overflow styling that's on the body, and add overflow styling to the container div.

<body>

     <div id="scroll-container" style="overflow:auto;">

          <!-- YOUR CONTENT HERE -->

     </div>

</body>

Then, we'll need to add some scripting so that the height of the container div is set correctly.

<body>

     <div id="scroll-container" style="overflow:auto;">

          <!-- YOUR CONTENT HERE -->

     </div>

  

     <script>

          $(document).ready(function() {

               // Sets the container div height correctly on page load

               $("#scroll-container").height($("body").height());

               // Will reset the container div height correctly if window size changes

               $(window).resize(function() {

                    $("#scroll-container").height($("body").height());

               });

          });

     </script>

</body>

And that should do it! Now when you scroll your page, if you click on a chart, the selection toolbar should be correctly positioned atop the chart.

Tags (3)
10 Comments
Not applicable

That's very helpful, thank you!

230 Views
Partner
Partner

Thanks for the workaround.

Hopefully Qlik fixes this issue in the next service release (unfortunately it wasn't included in 2.0.1).

As you can see here Mashup Integration - chart's toolbar gets displaces when page is scrolled  the bugid is QLIK-19766.

230 Views
Not applicable

You can also just apply the following to your css-file:

.qv-selection-toolbar{

  position: fixed;

}

Best regards

Thomas

230 Views
Employee
Employee

Right you are, Thomas, except that tends to break some other things. Take a look at the image below.

positionFixedIssue.png

I've then managed to fix that problem before, only to create other problems. It also doesn't fix the lasso. In the end, the way I suggest seems to be the most robust thing I've tried so far.

0 Likes
230 Views
Not applicable

You are right about the lasso Francis but I havn't experienced any problems like the one on the picture. Then again I havn't checked all browsers

0 Likes
230 Views
Employee
Employee

The particular issue I highlighted above happens with the selection toolbar of 'pop-open' menus, such as the ones in filter panels and tables, if you're interested in replicating.

0 Likes
230 Views
Not applicable

I use filter panes and I havn't seen the problem before. Just tried resizing  the window and that doesn't have any effect. But then again, I've just tested in Chrome

Regarding the lasso, the problem is with positioning the the canvas element that is used to draw on. Please let me know if you find a fix to this. I'll let you know if I find a fix of course

230 Views
Not applicable

Hi Francis

I worked a bit more on the problem with the selection-toolbar and came up with this.

CSS (Nothing new here)

.qv-selection-toolbar{

  position: fixed;

}

JS

$(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 should keep the selection-toolbar in place if you start scrolling after having selected an Sense object

Please let me know what you think.

I'll keep working on the canvas issue

Best regards

Thomas

0 Likes
230 Views
Not applicable

Hi Francis

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

0 Likes
230 Views
Employee
Employee

Interesting. I also found this slight adjustment to your code to work pretty well for keeping the selection toolbar in place if it is active while you are scrolling.

$('.qvobject').click(function (e) {
      id = $(this).attr('id');
      initial_scroll = $(this).offset().top;
});
$('body').scroll(function() {
      final_scroll = $('#'+id).offset().top;
      change_scroll = final_scroll - initial_scroll;
      $('.qv-selection-toolbar').css('top', $('.qv-selection-toolbar').offset().top + change );
        initial = $("#"+id).offset().top;
});
0 Likes
230 Views