ReportViewer Control - Height issue

Question

In my asp.net application, I am trying to open a particular report. I have the ReportViewer Control set with width of 100% and height of 100%. Now I expect that to mean that the report will take up the entire page. Well to my surprise, it does not. In IE7 while it takes the entire width of the page, it only takes up a small portion of the height. In Firefox, both the width and the height are messed up. I have the browser open up a new page that takes up almost all of the screen. Any ideas?

Thanks!

Irrawaddy

I have checked almost all answers but none of them is working. I got solution, a server side code, reportview1.width = 1000; – Wristwatch

Answer 1

Give it a static height that is enough for the entire height of the report. As far as I know 100% will not work because the ReportViewer control is essentially wrapped by one big div tag.

Tense

I tried the static height and it seems to work for both IE7 and FireFox. Thanks – Irrawaddy

Answer 2

This is the way I fixed, take a look

<div style="Width:auto;"> 
<form id="form1" runat="server" style="width:100%; height:100%;">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <rsweb:ReportViewer ID="rptViewer" runat="server" Width="100%" Height="100%" AsyncRendering="False" SizeToReportContent="True">
    </rsweb:ReportViewer>
</form></div>

The thing doing the magic is AsyncRendering="False" SizeToReportContent="True" the rest is basic HTML. The report will be displayed as it was designed.

There might be some code extra, but see if it works for you.

Hope it helps

Soong

I like this solution - it seems most clean of all those provided, but when I execute reports larger than a max window on my machine I'm not provided with any scrollbars. Any advice on that? – Bakst

I have the same problem with the scrollbars not being displayed. – Curia

Perfect! My CSS plus AsyncRendering="False" did the magic! .) – Testate

In version 2012, only SizeToReportContent="true" is needed. – Yeung

@Soong Any ideas how you can hide the standard SSRS controls i.e. Save, next page etc – Groos

I haven't used SSRS for a while. Sorry! – Soong

@Bobby B and Patrick J Collins <style type="text/css"> #ctl00_MainContent_ReportViewer1_ctl09{ width:900px; overflow:auto; } </style> – Nasser

Fantastic. I have been trying to solve this problem for a while and now - reports finally look good on screen. Thanks very much for posting your information. Much appreciated. – Stroke

Answer 3

I had the same problem with ReportViewer 11.0 and what did the trick for me was to set

Height="100%" 
SizeToReportContent="true"

while keeping 

AsyncRendering="true"

Eg

<rsweb:ReportViewer ID="reportControl" runat="server" Width="750" Height="100%" AsyncRendering="true" SizeToReportContent="true">

This actually generated a table with height="100%" for the control.

Jamisonjammal

Answer 4

this is the way i fixed it, setting the height dynamically using javascript, it works with both IE and Firefox. also works with reports larger than the maximum window size.

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="100%" ShowBackButton="True" ProcessingMode="Remote" />

<script language="javascript" type="text/javascript">
    ResizeReport();

    function ResizeReport() {
        var viewer = document.getElementById("<%= ReportViewer1.ClientID %>");
        var htmlheight = document.documentElement.clientHeight;
        viewer.style.height = (htmlheight - 30) + "px";
    }

    window.onresize = function resize() { ResizeReport(); }
</script>

Angloamerican

Initially this solution worked for me but the report again does not show data when there is detail report in it i.e. when we have link to 'see more details' and redirect to another report. Any help would be greatly appreciated. – Ornithopod

Answer 5

I know this is an old question, but I still struggled with this one recently. It appears the following works well in all modern browsers (only tested IE8/9, Firefox, and Chrome). The kickers for me were doctype and html element height.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html, body, form { width: 100%; height: 100%; margin: 0; padding: 0 }
    </style>
</head>
<body>
  <form runat="server">
    <asp:scriptmanager runat="server" />
    <rsweb:ReportViewer ID="ReportViewerControl" Width="100%" Height="100%" runat="server" />
  </form>
</body>
</html>

Hanger

By far the simplest solution – Dubbin

Answer 6

This is an issue with XHTML 1.1 standard. Change your page doctype to transitional to get 100% height working:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

Or if you still struggle, remove it completely.

Anisette

It was using transitional already. If I remove the doctype entirely, the issue goes away in IE7, but not in FireFox. – Irrawaddy

Answer 7

Dan, here is what we ended up doing with a little jQuery magic.

All reports used the same Report.Master as the master page:

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Report.master.vb" Inherits=".Report" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
     <style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;            
            border: none;
            background-color: #FFFFFF;     
            overflow: hidden;       
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            setWindowSize();
        });

        $(window).resize(function () {
            setWindowSize();
        });

        function setWindowSize() {
            // http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
            var myWidth = 0, myHeight = 0;
            if (typeof (window.innerWidth) == 'number') {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }

            var r = $('div[id*="_report_"]:first');
            r.width(myWidth);
            r.height(myHeight - 32);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">    
        <asp:ScriptManager ID="rptScriptManager1" runat="server" />
        <asp:ContentPlaceHolder ID="report" runat="server"/>                
    </form>
</body>
</html>

Then, each report page contained the ReportViewer and it's properties.

<%@ Page Title="This Cool Report" MasterPageFile="~/masterpages/Report.Master" Language="vb" AutoEventWireup="false" CodeBehind="viewmycoolreport.aspx.vb" Inherits=".viewmycoolreport" %>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<asp:Content ID="reportContent" ContentPlaceHolderID="report" runat="server">    
    <rsweb:ReportViewer ID="rptCoolReport" runat="server" Width="100%" ProcessingMode="Remote" SizeToReportContent="True" />
</asp:Content>

Now, when the report loads, the ReportViewer control ends up sizing itself to the size of the content window both on ready and resizing the window. The jQuery selector grabs the first div with an ID that contains "_report_" (since the ReportViewer control renders with a client id of ctl_report_<report_id>). The height ends up having to be less 32 pixels because of the header in the ReportViewer control (for paging, exporting, etc).

Catherinacatherine

SizeToReportContent="true" helped me to achieve what I want. I don't need to use the Jquery to resize further. thanks for the tip. – Pigfish

Answer 8

The following options will fix your SSRS Report loading problem in ASP.NET page.

And there is a fantastic property called ZoomMode="PageWidth" that will fix your report into full page. you also can use ZoomMode="FullPage" or ZoomMode="Percent". All those property will fix your page loading issue in ASP.NET page.

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="100%" Width="100%" ZoomMode="Percent"></rsweb:ReportViewer>

Mucilaginous

Except that it doesn't seem to fix the Height problem at all. – Maudiemaudlin

Answer 9

I recently sat down and fought the ReportViewer control to expand to the height of the report content while still allowing .AsyncRendering = true. Here's what I did, which requires jQuery, and has only been tested with Report Viewer 2008 (9.0.0.0).

<script type="text/javascript">

    $(function() {

        $('#<%= uxReportViewer.ClientID %> > iframe:eq(0)').bind('load', function() {
            ReportViewerResize(this);
        });

    });

    function ReportViewerResize(frame) {
        var container = $('#<%= uxReportViewer.ClientID %>');
        try {
            var reportFrame = $(frame).contents().find('html')[0].document.frames["report"].document;
            var reportHeight = $('div#oReportDiv > table > tbody > tr > td#oReportCell', reportFrame).height();
            $(container).css({ height: '' + (reportHeight + 10) + 'px' });
        } catch (e) { }
    }

</script>

Deflexed

Answer 10

This code is a bit longer, but it works in all browsers i've tested with and without async-rendering. The best part is in non-async mode, it expands to the size of the report contents. In async mode, it expands to the size of the page (minus the offset from the top). I should point out, this is specific to VS2010 version of reportviewer.

<script type="text/javascript">
function ResizeReport(reportId){
        var rep = document.getElementById(reportId);
        var j = 0;

        for (var i = 0; i < rep.childNodes.length; i++) {
            var child = rep.childNodes[i];
            if (child.nodeName == "DIV") {
                j++;
                if (j == 2) {
                    child.firstChild.style.overflow = "";
                    while (child.nodeName == "DIV") {
                        child = child.firstChild;
                    }
                    child.style.width = "1px";
                    rep.style.width = (child.clientWidth) + "px";
                    rep.style.height = "";
                    return;
                }
            }
        }

        if (rep.style.height != '400px') // default value //
            return;
        ResizeReportHeight(reportId);
        window.onresize = function () { ResizeReportHeight(reportId); }
    }

    // Used to resize an async-report. Hand edit as needed.
    function ResizeReportHeight(reportId, offsetFromBot) {
        var rep = document.getElementById(reportId);
        var iFrame = rep.getElementsByTagName('iframe')[0];
        var htmlHeight = document.documentElement.clientHeight;
        var offTop = 0;
        var obj = iFrame;
        while (obj) {
            offTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        var newHeight = (htmlHeight - offTop)
        if (offsetFromBot)
            newHeight -= offsetFromBot;
        if (newHeight < 1)
            newHeight = 1;
        rep.style.height = "";
        iFrame.style.height =  newHeight + "px";
    }
</script>
<script type="text/javascript">
    window.onload = function () { ResizeReport("<%= reportviewer1.ClientID %>"); }
</script>
<rsweb:reportviewer ID="reportviewer1" runat="server" ProcessingMode="Remote" Width="100%" />

Photoconduction

Answer 11

This is yet another way to solve this issue, using only CSS and allowing extra space above ReportViewer controls if needed:

In the aspx document, I did:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Your page title</title>
    <style type="text/css">
        [id^=reportViewer1][role=document] {
            height: calc(100vh - 50px) !important;
        }
    </style>
</head>
<body style="height: 100vh; margin: 0;">

The magic here is forcing the height of the document part of the control to be calculated. 50px should do if you don't have anything above the original controls. Setting the body to 100vh (100% of Viewer's Height) also helps making sure it will fit the whole browser's document area without displaying scroll bars.

On the ReportViewer control I did as follows:

<rsweb:ReportViewer ID="reportViewer1" runat="server" Width="100%" Height="100%" 
Font-Names="Verdana" Font-Size="8pt" AsyncRendering="True" SizeToReportContent="False">
</rsweb:ReportViewer>

It's important to note that CSS calc may not work on older browsers. Here it did well on current Chrome and Edge browsers.

Ram

This is the only solution that worked for me on ReportViewer v15, thank you. – Flattish

Answer 12

As to what I have experienced, the report viewer control renders by default with a height of 400px if SizeToReportContent is set to false.
If you want a dynamic height, you need to add a css class to the report viewer and the following css:

#reportViewerContainer > span
{
    display:block;
    height:100% !important;
}

.reportViewer
{
    height:100% !important;
}

"reportViewerContainer" is the parent container of the report viewer (a div, body etc.). The viewer renders as a span with height: 0 and inside is all the content. If you change this, everything should work fine.

Trista

Answer 13

This is how I fixed my problem for the height... No as elegant as I wish but It work.

function ResizeReport() {
    var htmlheight = document.documentElement.clientHeight - 110;
    var reportViewer = $('div[id^=VisibleReportContent<%= this.bddr_report.ClientID %>]').parent();
    reportViewer.css('height',htmlheight+'px');
}

Supplemental

Answer 14

This is the solution to fix it, setting the height dynamically using javascript, it works with both IE and Firefox.

---

<script type="text/javascript">
var ReportViewerForMvc = ReportViewerForMvc || (new function () {

    var _iframeId = {};

    var resizeIframe = function (msg) {
        var height = 360;//here you specify the height if you want to put in 
                        // percent specify value in string like "100%"
        var width = 1255;// follow above

        $(ReportViewerForMvc.getIframeId()).height(height);
        $(ReportViewerForMvc.getIframeId()).width(width);
    }

    var addEvent = function (element, eventName, eventHandler) {
        if (element.addEventListener) {
            element.addEventListener(eventName, eventHandler);
        } else if (element.attachEvent) {
            element.attachEvent('on' + eventName, eventHandler);
        }
    }

    this.setIframeId = function (value) {
        _iframeId = '#' + value;
    };

    this.getIframeId = function () {
        return _iframeId;
    };

    this.setAutoSize = function () {
        addEvent(window, 'message', resizeIframe);
    }

}());

ReportViewerForMvc.setAutoSize();
</script>

• Please don't change the following code of ".aspx"

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
  <asp:ScriptReference  Assembly="ReportViewerForMvc"          Name="ReportViewerForMvc.Scripts.PostMessage.js" />
   </Scripts>
</asp:ScriptManager>

Here we are replacing the ReportViewerForMvc.Scripts.PostMessage.js explicitly with our own resizeIframe where we specifying width

Jill

Answer 15

The easiest way for me was to set report control width and height properties to 100% and the trick is to surround the control with a div and give that wrapper a style with a height set to 100vh!

<div id="ssrsReportViewerWrapper" style="width: 100%; height: 100vh;">

        <rsweb:ReportViewer 
            ID="ssrsReportViewer" 
            runat="server" 
            Width="100%"
            Height="100%"
            EnableViewState="true"
            SizeToReportContent="false"
            ZoomMode="Percent" 
            ZoomPercent="100"
            ProcessingMode="Remote" 
            ShowExportControls="true" 
            ShowParameterPrompts="true" >

          <ServerReport ReportPath="" ReportServerUrl=""  />

        </rsweb:ReportViewer>

    </div>

Abet

Answer 16

This is what I found working for "Microsoft.ReportViewer.WebForms, Version=15.0.0.0":

<style type="text/css">
   [id=<% =ReportViewer1.ClientID%>_ctl13] {
     height:500px !important;
   }
</style>

<rsweb:ReportViewer ID="ReportViewer1" runat="server" >
    <ServerReport ReportPath="xxx" />
</rsweb:ReportViewer>

Gapes