Full height report viewer with a sidebar

Question

I'm trying to achieve this layout with a report viewer. The panel on the left contains various options for the report. On the right is the report itself. The report component scrolls if needed but the webpage itself doesn't. Pretty standard asp.net report page. Or so I though.

The layout itself I can do it easily, there's plenty of documentation on how to get this result and they work without the report viewer. However the report viewer isn't cooperating at all and doesn't seem to follow any logic when I add it.

I can make 2 divs be side by side. I can make the report's parent div take all the available height. I cannot get the report viewer to do both and keep working properly. What kind of ungodly CSS do I need to get the layout I want? I don't mind using a table instead of divs but I didn't get any better result with a table.

Most of my attempts end up looking like either of these: The report shows up where it should be and the width is fine, but I can't get it to take all the available height. If I set an height in pixels it can get taller just fine but I want it to take all the remaining vertical space, no matter the window size and resolution. It always disregard any kind of relative height values.

Or It takes all the available height, but refuses to stay next to the options.

And so here's the base structure I have. As mentionned before it could use a table instead, I don't mind.

<style type="text/css">
    .reportContainer {
    }

    .reportOptions {
    }

    .reportView {
    }
</style>
<div class="reportContainer">
    <div class="optionSidebar">
        <table id="reportOptions">
            <!--the options -->
        </table>
    </div>
    <div class="reportView">
        <rsweb:ReportViewer ID="theReportViewer" runat="server"
         ShowPrintButton="true" Visible="true" ShowRefreshButton="false"
         KeepSessionAlive="False" ZoomMode="PageWidth" 
         Width="100%" Height="100%" />
    </div>
</div>

How do I get a Microsoft.ReportViewer.WebForms report viewer to both take all the available vertical space and stay next to the options panel without making the page scroll?

Correct me if i'm wrong but isn't reportView take 100% of the height of the container? If you want the container (reportContainer) to take all availible height then you have to put css-style on the container. You say you can make the report parent div take all the height, what happens when you do that? — chrillelundmark
@chrillelundmark It does nothing, the report viewer stays at whatever height it is. It's like only the asp.net control's Height attribute really affect it. — 0xFF
Then I don't think i can help you, for me the problem is in the reportview. Have you tried with different zoomModes to see what happens with the report? — chrillelundmark
@chrillelundmark Yeah, zoomModes don't help with this. Ah well, thanks anyway, for now I gave up and just wrote a bunch of media queries for various static heights. — 0xFF

Geyser LaPunk Geyser LaPunk · Accepted Answer · 2021-02-05T02:18:45

Set surrounding div to height 100vh

<div class="reportView" style="height: 100vh;">
        <rsweb:ReportViewer ID="theReportViewer" runat="server"
         ShowPrintButton="true" Visible="true" ShowRefreshButton="false"
         KeepSessionAlive="False" ZoomMode="PageWidth" 
         Width="100%" Height="100%" />
    </div>

Full height report viewer with a sidebar

1 Answers