Setting BIRT height and width dynamically based on content

Question

I built a report using BIRT and Data tables . Everything works as expected. However, the height and width of the BIRT viewer are not dynamic. They are static and therefore scrolling is applied. Therefore, I wrote code to make height and width of a BIRT viewer dynamic.

 function resizeFrame(e,f){ var x = document.getElementsByTagName("iframe"); var winW = 1112, winH = 486; if (document.body && document.body.offsetWidth) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) { winW = document.documentElement.offsetWidth; winH = document.documentElement.offsetHeight; } if (window.innerWidth && window.innerHeight) { winW = window.innerWidth; winH = window.innerHeight; } x[0].style.width = winW + "px"; x[0].style.height = winH + "px"; console.log(f,e); } 

BIRT code is:

 <birt:viewer id="birtViewer" reportDesign="/sampleReport.rptdesign" pattern="run" height="700" width="1136" scrolling="none" showParameterPage="false" isHostPage="false"> </birt:viewer> 

Note that the height and width of the BIRT view are 700px and 1136px respectively. The above code does not do dynamic height and width .
How can I increase BIRT dynamics and width? I added a picture for a clear understanding.
As you can see in the picture, it adds vertical scrolling. How to prevent this and increase the height of the BIRT depending on the height of the table?

Answer 1

could you activate the function that you wrote from the report? I do not think so. I would look at the code that “creates” the viewer and runs the report.

After the report has been created and loaded, you can call the javascript function to resize the window according to its contents. More details here: http://www.eclipse.org/birt/documentation/integrating/viewer-usage.php

Not sure why this is necessary? Isn't it easier to just open a full-screen window?

Answer 2

I suggest using height and width as a percentage (%).

Also calculate the height and width of the window and use them for the outer div.

for the inner div, use the height and width of 100%, so the inner div will be fixed in the outer div, and scrolling will not appear on the screen.

Hope this helps you. thanks