ReportViewer problem in google chrome

Question

I am using Reportviewer in my asp.net mvc (C#) application. In IE and Firefox, the reportviewer looks fine.

But in Chrome, the header and body gets shrinked. I was able to correct the header display problem as suggested in http://www.mazsoft.com/blog/post/2009/08/13/ReportViewer-control-toolbar-in-Google-Chrome-browser.aspx.

  if ($.browser.safari) {
      $("#ReportViewerControl table").each(function(i, item) {
         $(item).css('display', 'inline-block');
      });
  }

But the Body(Viewer) part still appears to be in half of the screen. The problem appears to be with the width of empty second td of the table:

<table cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td onpropertychange="ShowFixedHeaders()" id="oReportCell">....Some Data...</td>
      <td height="0" width="100%"></td>
    </tr>
  </tbody>
</table>

The Second td in the above table is empty with 100% width, this may be the cause of the bug in chrome. How can i remove the width of the second td or is there any fix for this?

How can i access the element inside nested iframe?

Answer 1

Try with more jQuery maybe

$('#ReportViewerControl table td[width='100%']).attr('width','');

Although this will probably affect other items in the report?

Answer 2

I am hosting the report viewer in an ASPX page and fought a similar problem with Chrome. Because the report viewer uses iframes, it's not easy getting to the <TD> element needing to be removed. I tried various methods and finally settled on the following hack. It probably isn't as good as it can be, but it works for me.

First I wrap the report viewer in a <DIV> and hide it:

<div id="rpt-container" style="display: none;">
    <rsweb:ReportViewer ID="rptViewer" Width="99.9%"    BackColor="#eeeeee" 
            runat="server" ShowExportControls="False"> 
    </rsweb:ReportViewer>
 </div>

Then I added the following jQuery snippet to locate the element to be removed allowing successful rendering in Chrome.

<script type="text/javascript"> 
    $().ready(function() {
         setTimeout( function(){  
             $('td#oReportCell', window.parent.frames[0].frames[1].document).next().remove();  
             $("#rpt-container").fadeIn();
          }, 300);  //slight delay to allow the iframe to load
     });
 </script>

I tried using the frameReady plugin, but didn't have much luck. So as a compromise, I simply set a delay of around 300 milliseconds before trying to pick off the DOM element inside the iframe. If you don't hide/fadeIn the report, you see some ugly animation as the element is removed.