Use case description

It is often useful to have control over the page layout surrounding renderred report when users resize browser window. Rendered reports will resize automatically using the scaling setting you specify ('container' being the default value of the 'scale' property). You can find more information on the scaling property here:

https://community.jaspersoft.com/documentation/tibco-jasperreports-server-visualizejs-guide/v71/api-reference-report#Resizing_a_Report

However, while a rendered report is scaled automatically, the surrounding container does not. This will often result in blank spaces between page elements when browser window is shrinked after report rendering. Like this (note the blank space between the Map report and the search field underneath):

Solution

One way to address this issue is to force the container element which hold the report to re-calculate its size each time the window is resized. In the sample JSFiddle snippet code below we are re-rendering the container <div> with updated height value each time window dimensions change:

https://jsfiddle.net/Stas_P/vq8j02Ly/

A couple of things to note about this approach:

- we know that a report rendered via Visualize.js is placed inside a div container of class "jrPage"

- the size of this "jrPage" div is dynamically scaled for the value which we can find in the "transform: scale()" property. We are looking for this property value with the following line of code (and later use the value to transform the height value of the parent container):

var scale = $container.find(".jrPage").css("transform").match(/\d\.(\d)+/)[0];

- the debounce() method from the underscore library is used to delay the re-calculation of the container height just slightly. I added this delay because the resize event handler would often run before the scale value of the "jrPage" element got updated. Additional benefit of this function is that when end user drags window borders to resize it, the resize event handler is triggered much less amount of times