ReportViewer not showing report properly in IE

[Morten]

Hey guys and gals.

Trying to make some use of the Telerik ReportViewer, and everything seems to work as intended, if we are running it in Chrome or Firefox, but if we're trying to run it in IE, the ReportViewer just doesn't show the report at all.

We tried to remove the doctype, just as a temporary solution, but then all the content on the site looks kinda weird, except for the ReportViewer.

We have tried to give it a fixed height and width, and in percent, but it gives us the same result, and after searching across the interweb, it looks like a lot of people had the same problem, but that it should have been fixed in the Q1 2013, and we're running Q2 2013.

Here's our current markup:

<div style="width: 100%; height: 100%;">
    <div id="divDisable" style="width: 100%;
        height: 100%; z-index: 10000; background: #000000; opacity:0.15;
        filter:alpha(opacity=15); position: absolute;" runat="server">
    </div>
    <div>
        <telerik:ReportViewer id="ExampleReportViewer" Width="100%" Height="100%"
        ShowHistoryButtons="False" ShowPrintButton="False"
        ShowPrintPreviewButton="False" runat="server"></telerik:ReportViewer>
    </div>
</div>

[Nasko]

Hi Morten,

You can set the child element to a relative height (%), only if all parent elements have defined heights, i.e. not a value of auto, then . If the parent element has 100% height, the parent's parent height must be defined too. This could go until to the html root element, so you would need to specify height to the whole DOM tree.

Additionally, you should force IE browser to use standard mode by adding the following meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Regards,
Nasko
Telerik