nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dynamic size of javascript viewer

sseaman

I'm curious if there is a way to make the size of the BIRT report in the javascript based viewer change based upon the parent div's size (which we have set at 100% so it changes as the window is resized)

Sorry if this is an easy question but I'm very new to this.

Currently I'm accomplishing this by registering for the window resize event and then manually modifying the #NavigationBar, .contentPanel, and .floatPanel DOM elements

Find more posts tagged with

Comments

averma

Hi sseaman,
On your resize event handler, call viewer.setWidth(****), viewer.setHeight(****), then viewer.submit(...) to change the size of the viewer.

sseaman

<blockquote class='ipsBlockquote' data-author="'averma'" data-cid="99551" data-time="1335205350" data-date="23 April 2012 - 11:22 AM">
Hi sseaman, 
On your resize event handler, call viewer.setWidth(****), viewer.setHeight(****), then viewer.submit(...) to change the size of the viewer. </blockquote>
 
If I do that the viewer makes two network requests each time the view port is resized. This is not acceptable as we have up to 4000 concurrent users. Why would it need to go back to the server for a browser side issue that should easily be solved by non-strict width based css? 
 
Isn't there a way in the birt reports layout to have the width set to a percentage (say, 100%)?

sseaman

I found the solution by digging through the source JS.

If you call setSize() on the viewer it will update the container. setWidth and setHeight however will not. It will only set the sizes, but not resize them.

A bit confusing...

averma

submit() results in additional round trip, setSize() should be right for your use case.