How To: Resize Acrobat Viewer to Fit the Page

With the Professional Edition license for ActiveReports, you can use the WebViewer control to quickly display reports in any of the four types of Viewer: HtmlViewer, RawHtml, AcrobatReader, or FlashViewer. Let us take a quick look below to get a basic idea about these viewer types:

• HtmlViewer (default): Provides a scrollable view of a single page of the report at a time. Downloads only HTML and javascript to the client browser. Not recommended for printable output.
• RawHTML: Shows all pages in the report document as one continuous HTML page. Provides a static view of the entire report document, and generally printable output, although under some circumstances pagination is not preserved.
• AcrobatReader: Returns output as a PDF document viewable in Acrobat Reader. Client requirements: Adobe Acrobat Reader
• FlashViewer: Provides an interactive viewing experience and no-touch printing using the widely-adopted Flash Player. Client requirements: Adobe Flash Player

The WebViewer allow users to quickly create and display reports over the web. It is quite obvious that a user would expect the Webviewer to fit into the browser it is being displayed. Typically a user would set the width and the height for the Webviewer to 100%; however the height property has no effect. A general approach which works well for different viewer types except the AcrobatReader is to set properties using the CSS style something like:

<style type="text/css">  
html, body, #WebViewer1, #controlDiv  
{  
   width: 100%;  
   height: 100%;  
   margin: 0;  
}  
</style>

However the AcrobatReader type has some limitations and therefore this approach does not work well. So the output is restricted to the size of the aspx page at the design time and the output comes out like:

Another workaround which a user might want to try is to add the following code to the Page_Load event:

protected void Page_Load(object sender, EventArgs e)  
{  
   WebViewer1.Width = Unit.Percentage(100);  
   WebViewer1.Height = Unit.Percentage(100);  
   WebViewer1.Style["left"] = "0px";  
   WebViewer1.Style["height"] = "100%";  
}

In my opinion the best way to control the size of the webviewer control is to do it at client side and jQuery comes out handy to take care of such scenarios. Below is the jQuery code which can be used to set the height of the AcrobatViewer and works well with different browsers. The code snippet contains comments which are self explanatory:

<script type="text/javascript" language="javascript">  
   $(document).ready(function () {  
   // Get a reference to the first <DIV> inside  
   // the <DIV> with ID="viewer-layout-main-panel"  
   var d = $("#viewer-layout-main-panel:first");  

   // Set d equal to the width of its parent <DIV> minus  
   // an offset to accomodate padding or margin attribute    
   d.width($("#viewer-layout-main-panel:first").width() - 10);  

   // Get the top position of the Main Div  
   var top = $("#mainDiv").position().top;  

   // Set the height of the MainDiv to the  
   // document height minus its Top position               
   $("#mainDiv").height($(document).height() - top - 25);  

   // Get the height and width of the mainDiv  
   var h = $("#mainDiv").height();  
   var w = $("#mainDiv").width();  

   // Size the WebViewer Control  
   $("#WebViewer1").height(h - 8);  
   $("#WebViewer1").width(w - 8);  
   });  
</script>  

A sample application demonstrating this implementation can be downloaded using the link provided below. Webviewer_Resize