Best IT Recipes

SSRS 2008 R2 - SSRS 2012 - ReportViewer: reports are empty in Safari and Chrome

I migrated our reporting services from version 2008 to another version of 2008 R2 server. In the 2008 version, reports work fine on Safari. In the new version of 2008 R2, reports are not displayed at all. All I see is the options section, and then the report is empty. Same thing in Chrome. According to Microsoft, Safari IS is supported, if in a limited way. The reports are not complicated. In fact, I created a report in which there was only a line to see if it would be displayed in Safari, but no, this report is also completely empty. Has anyone made SSRS reports visible in Safari? Should I intervene in some kind of configuration setting?

+74
reporting-services ssrs-2008 ssrs-2012 reportviewer reporting-services-2012
May 11 '11 at 17:16
source share
10 answers

Final Solution (also works in SSRS 2012!)

Add the following script to the following file (on the SSRS server)
C:\Program Files\Microsoft SQL Server\MSRS10_50.MSSQLSERVER\Reporting Services\ReportManager\js\ReportingServices.js

 function pageLoad() { var element = document.getElementById("ctl31_ctl10"); if (element) { element.style.overflow = "visible"; } }

Note As azzlak noted, the name of the div is not always ctl31_ctl10 . For SQL 2012 try ctl32_ctl09 and for 2008 R2 try ctl31_ctl09 . If this solution does not work, look at the HTML from your browser to make sure that the script correctly changed the overflow:auto property to overflow:visible .



ReportViewer Management Solution

Insert this line of style in the .aspx page (or in the associated .css file, if any)

 #reportViewer_ctl09 { overflow:visible !important; }


Cause

Chrome and Safari display overflow:auto differently with respect to IE.

SSRS HTML is QuirksMode HTML and depends on IE 5.5 errors. Non-IE browsers do not have IE quirksmode and therefore render HTML correctly

The HTML page generated by SSRS 2008 R2 reports contains a div that has an overflow:auto style and turns the report into an invisible report.

 <div id="ctl31_ctl10" style="height:100%;width:100%;overflow:auto;position:relative;">

I can view reports in Chrome by manually changing overflow:auto to overflow:visible on the created web page using Chrome Dev tools ( F12 ).



I love Tim’s decision , it’s easy and useful.

But there is still a problem: at any time, the user changes the parameters (my reports use parameters!) AJAX updates the div, overflow: the automatic tag is overwritten, and the script does not change it.

This technical detail explains what the problem is:

This is because on a page built with AJAX panels, only AJAX panels change their state without refreshing the entire page. Therefore, the OnLoad events applied to the <body> tag are fired only once: the first time the page loads. After that, changing any of the AJAX panels will no longer trigger these events.

Einarq suggested this solution :

Another option is to rename your function to pageLoad. Any functions with this name will be called automatically by asp.net ajax, if it exists on the page, also after each partial update. If you do this, you can also remove the onload attribute from the body tag

So I wrote an improved script, which is shown in the solution.

+96
Aug 29 2018-11-11T00:
source share
— -

Just enable SizeToReportContent="true" as shown below

 <rsweb:ReportViewer ID="ReportViewer1" runat="server" SizeToReportContent="True"...
+26
Nov 23 '12 at 5:50
source share

I am using Chrome version 21 with SQL 2008 R2 SP1, and none of the above fixes worked for me. Below is the code that worked, as in the other answers. I added this bit of code to add to "C: \ Program Files \ Microsoft SQL Server \ MSRS10_50.MSSQLSERVER \ Reporting Services \ ReportManager \ js \ ReportingServices.js" (on the SSRS server):

 //Fix to allow Chrome to display SSRS Reports function pageLoad() { var element = document.getElementById("ctl31_ctl09"); if (element) { element.style.overflow = "visible"; } }
+22
Aug 22 '12 at 19:36
source share

This is a known issue . The problem is that the div tag has a "overflow: auto" style, which apparently isn't very well implemented with WebKit, which is used by Safari and Chrome (see Emanuele Greco answer). I did not know how to use the Emanuele clause to use the RS: ReportViewerHost element, but I decided to use JavaScript.

Problem

enter image description here

Decision

Since "overflow: auto" is specified in the style attribute of the div element with id "ctl31_ctl10", we cannot override it in the stylesheet file, so I resorted to JavaScript. I added the following code to "C: \ Program Files \ Microsoft SQL Server \ MSRS10_50.MSSQLSERVER \ Reporting Services \ ReportManager \ js \ ReportingServices.js"

 function FixSafari() { var element = document.getElementById("ctl31_ctl10"); if (element) { element.style.overflow = "visible"; //default overflow value } } // Code from http://stackoverflow.com/questions/9434/how-do-i-add-an-additional-window-onload-event-in-javascript if (window.addEventListener) // W3C standard { window.addEventListener('load', FixSafari, false); // NB **not** 'onload' } else if (window.attachEvent) // Microsoft { window.attachEvent('onload', FixSafari); }

Note

There seems to be a solution for SSRS 2005 that I have not tried, but I don’t think it applies to SSRS 2008, because I cannot find the DocMapAndReportFrame class.

+13
Aug 12 '11 at 16:39
source share

Here is the solution I used for Report Server 2008 R2

It should work regardless of what the Report Server will output for use in its table id attribute. I do not think that you can always assume that it will be "ctl31_fixedTable"

I used a combination of the above sentence and some ways to dynamically load jquery libraries into a page from a javascript file found here

On the server, go to the directory: C: \ Program Files \ Microsoft SQL Server \ MSRS10_50.MSSQLSERVER \ Reporting Services \ ReportManager \ js

Copy jquery-library jquery-1.6.2.min.js into the directory

Back up the ReportingServices.js file. Edit the file. And add this to the bottom:

 var jQueryScriptOutputted = false; function initJQuery() { //if the jQuery object isn't available if (typeof(jQuery) == 'undefined') { if (! jQueryScriptOutputted) { //only output the script once.. jQueryScriptOutputted = true; //output the script document.write("<scr" + "ipt type=\"text/javascript\" src=\"../js/jquery-1.6.2.min.js\"></scr" + "ipt>"); } setTimeout("initJQuery()", 50); } else { $(function() { // Bug-fix on Chrome and Safari etc (webkit) if ($.browser.webkit) { // Start timer to make sure overflow is set to visible setInterval(function () { var div = $('table[id*=_fixedTable] > tbody > tr:last > td:last > div') div.css('overflow', 'visible'); }, 1000); } }); } } initJQuery();
+10
Sep 19 '12 at 19:07
source share

My decision is based on the above ideas.

 function pageLoad() { var element = document.querySelector('table[id*=_fixedTable] > tbody > tr:last-child > td:last-child > div'); if (element) { element.style.overflow = "visible"; } }

It is not limited to a specific identifier, plus you do not need to include any other library such as jQuery.

+10
Jan 17 '15 at 19:51
source share

You can easily fix this with jQuery - and a bit of an ugly hack :-)

I have an asp.net page with a custom ReportViewer element.

  <rsweb:ReportViewer ID="ReportViewer1" runat="server"...

In the document ready event, I start the timer and look for an element that needs to be fixed overflow (like previous messages):

  <script type="text/javascript"> $(function () { // Bug-fix on Chrome and Safari etc (webkit) if ($.browser.webkit) { // Start timer to make sure overflow is set to visible setInterval(function () { var div = $('#<%=ReportViewer1.ClientID %>_fixedTable > tbody > tr:last > td:last > div') div.css('overflow', 'visible'); }, 1000); } }); </script>

Better than assuming it has a specific identifier. You can set the timer to whatever you like. I set it to 1000 ms here.

+3
Sep 08 '11 at 7:00
source share

FYI - none of the above actions for me in 2012 SP1 ... a simple solution was to embed the credentials in a common data source and then tell Safari about trusting the SSRS server site. Then it worked! For several days, pursuing alleged solutions like the ones above, just to find out that integrated security will not work reliably on Safari, you need to mess around with keychain on the poppy and then still will not work reliably.

+2
Mar 11 '14 at 23:21
source share

The solution provided by Emanuele worked for me. I could see the report when I accessed it directly from the server, but when I used the ReportViewer element on my aspx page, I could not see the report. After checking the displayed HTML, I found a div by id "ReportViewerGeneral_ctl09" ( ReportViewerGeneral is the identifier of the report viewer control server), which had an overflow property for automatic.

 <div id="ReportViewerGeneral_ctl09" style="height: 100%; width: 100%; overflow: auto; position: relative; ">...</div>

I used the procedure explained by Emanuele to change it to visible as follows:

 function pageLoad() { var element = document.getElementById("ReportViewerGeneral_ctl09"); if (element) { element.style.overflow = "visible"; } }
+1
Oct 03
source share

I used this. Add a script link to jquery in the Report.aspx page. Use the following to bind jQuery to Microsoft events. Used Eric's little suggestion to configure overflow.

 $(document).ready(function () { if (navigator.userAgent.toLowerCase().indexOf("webkit") >= 0) { Sys.Application.add_init(function () { var prm = Sys.WebForms.PageRequestManager.getInstance(); if (!prm.get_isInAsyncPostBack()) { prm.add_endRequest(function () { var divs = $('table[id*=_fixedTable] > tbody > tr:last > td:last > div') divs.each(function (idx, element) { $(element).css('overflow', 'visible'); }); }); } }); } });
+1
Apr 08
source share


More articles:


All Articles