IE7 ReportViewer Control

I have a site that I built and works well for everyone in IE8/IE9, Chrome and FireFox. However, now my client is asking for this to work in IE7 as well since there machine still has IE7. I can’t figure out what is wrong with the ReportViewer Control. Any help would be appreciated.

The issue is that my report goes way outside of the set height and width; it doesn’t stay within the DIV that I have wrapped around it using jQuery

jQuery Code

 $(document).ready(function () {
            var htmlwidth = $('.main').width() - 20;
            var htmlheight = $(document).height() - $('.header').height() - 45;
            $('#<%= ReportViewer1.ClientID %>').wrap('<div style="overflow:auto;" />');
            $('#<%= ReportViewer1.ClientI开发者_如何学PythonD %>').parent().css(height, htmlheight);
            $('#<%= ReportViewer1.ClientID %>').parent().css('width', htmlwidth);
            $('#<%= ReportViewer1.ClientID %>').css('width', htmlwidth);
            $('#<%= ReportViewer1.ClientID %>').css(height, htmlheight);
            $('#<%= ReportViewer1.ClientID %>').parent().css('border', 'solid 1px Black');
    });

Content

<asp:ScriptManager ID="scManager" runat="server"></asp:ScriptManager>
<rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="100%"  Width="100%"
    SizeToReportContent="true" ZoomMode="Percent" AsyncRendering="false" >
</rsweb:ReportViewer>

Sample Generated Block {content + jQuery Code}

<div style="width:500px; overflow:auto; border:solid 1px Black;height:400px;">
    <asp:ScriptManager ID="scManager" runat="server"></asp:ScriptManager>
    <rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="400px"  Width="500px"
        SizeToReportContent="true" ZoomMode="Percent" AsyncRendering="false" >
    </rsweb:ReportViewer>
</div>

---

Looks like your facing the IE7 overflow issue. You can read more about it here

To fix your problem set the outer div to have position: relative

Add the following line to your jQuery:

$('#<%= ReportViewer1.ClientID %>').parent().css(position, relative);

Or add the following to your wrap()

$('#<%= ReportViewer1.ClientID %>').wrap('<div style="overflow:auto; position:relative;" />');

The final output should look something like this:

<div style="width:500px; overflow:auto; border:solid 1px Black;height:400px; position:relative;">
    <asp:ScriptManager ID="scManager" runat="server"></asp:ScriptManager>
    <rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="400px"  Width="500px"
        SizeToReportContent="true" ZoomMode="Percent" AsyncRendering="false" >
    </rsweb:ReportViewer>
</div>