Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
.png "Former Employee"){kind=icon}
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.
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.