SSRS ReportViewerWebPart Height Issue

Question

I am working with a customized page that has an embedded ReportViewerWebPart inside of a content tag. In this case, it's inside of "PlaceHolderMain".

It looks like this:

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%" >  
    <RSWP:ReportViewerWebPart id="m_sqlRsWebPart" runat="server" ChromeType="None" AsyncRendering="false" Height="100%" Width="100%" HyperlinkTarget="_blank" __WebPartId="{01816587-6AFE-4439-84E1-1137AC5F6800}" />
    <WpNs0:ExcelWebRenderer id="m_excelWebRenderer" runat="server" ChromeType="None" WebPart="true" Visible="false" Height="100%" __MarkupType="vsattributemarkup" Width="" __WebPartId="{1CFA4569-7F41-4832-A8FD-F6665177E209}" />
</asp:Panel>
</asp:Content>

Despite the fact that I have Height="100%" specified, the ReportViewerWebPart is not expanding to take up 100% of the view. Has anyone seen this behavior and if so, is there any workaround. I'm using Assembly="Microsoft.ReportingServices.SharePoint.UI.WebParts,Version=10.0.0.0".

Answer 1

I'm thinking it probably isn't related to the height and width of the ReportViewerWebPart. Since it renders as a DIV with a height and width of 100%, it probably is one of the containing elements.

An easy check would be to give your Panel a static height/width (for example... 600px) and make sure the ReportViewerWebPart expands to those dimensions.

Answer 2

I solved this once using a custom webpart that loaded a custom javascript file on pages where the report service webparts resides (requires jQuery). The following snippet is a bit old and might contain requirements not eligible to yours but you should get the point:

jQuery(document).ready(function () {
var $rsViewers = $('div[rsviewer=RSViewer]'),
    toolbarHeight = $('tr[id$=ToolbarRow]').height(),
/* Function that updates the reports height to fit its contents */
    updateReportHeight = function ($rsViewer) {
        var $visibleReportContent = $('div[id^=VisibleReportContent]', $rsViewer);
        /* Wait until visible */
        if ($visibleReportContent.is(':visible')) {

            var newHeight = $('table[id$=ReportViewer_fixedTable]', $rsViewer).height() + toolbarHeight,
                currentHeight = $rsViewer.height();

            /* If width of content greater than webpart, add horizontal scroll */
            if ($('table[id$=ReportViewer_fixedTable]').width() > $('div[id$=ViewerAreaUpdatePanel]', $rsViewer).width()) {
                $('div[id$=ReportViewer]', $rsViewer).css('overflow-y', 'hidden').css('overflow-x', 'scroll');
            } else {
                $('div[id$=ReportViewer]', $rsViewer).css('overflow-y', 'hidden').css('overflow-x', 'hidden');
            }

            /* Already equal - abort */
            if (newHeight == currentHeight) {
                return;
            }

            /* Modify css and attributes so we get wanted behaviour */
            $rsViewer.parent('div[id^=WebPartWP]').css('overflow', '');
            $visibleReportContent.css('height', newHeight + 'px');
            $('td[id$=ViewerCell]', $rsViewer).css('height', newHeight + 'px');
            $('div[id$=ViewerAreaUpdatePanel]', $rsViewer).css('height', '');
            $('td[id$=CenterPanelCell]', $rsViewer).attr('valign', 'top');
            $('div[id$=PromptAreaUpdatePanel]', $rsViewer).parent().attr('valign', 'top');
            $('.sqlrv-SeparatorContainer', $rsViewer).css('height', (newHeight - 10) + 'px').parent().attr('valign', 'top');
        } else {
            setTimeout(function () {
                updateReportHeight($rsViewer);
            }, 500);
        }
    };

/* For each ReportViewer webpart, adjust the height */
$rsViewers.each(function (index, value) {
    updateReportHeight($($rsViewers[index]));
});

/* Bind the 'removeParameterContainerHeight' function so it fires when the webpart is updated through the updatepanel. */
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (sender, args) {
    var $rsViewers = $('div[rsviewer=RSViewer]');
    $rsViewers.each(function (index, value) {
        updateReportHeight($($rsViewers[index]));
    });
});

});