Recently I’ve been doing a lot of SSRS reports and as a Web Developer I test in different browsers which is a standard practice. Having Chrome as my main choice of browser I am annoyed every time I open SSRS Reports as they don’t show properly. I know the data is there as it gives me the correct page numbers and I can export them but why is it not showing on-screen?
Well after looking at the HTML Code it generates it seems like the parent div element where the report is rendered have an overflow style which is set to auto, well that will work well in Internet Explorer and Firefox but behaves differently in Chrome and Safari hence its now showing. To solve that is quite easy all you need to do is set the overflow style to visible rather than auto making all browsers happy.
So how do we do that?
Now we know in principle its a correct assumption let do that in practice.
Open a SSRS Report in Chrome, press F12 to open the Chrome DevTools window, press Ctrl-F to search for the <div> tag with and id containing the words ReportArea. To confirm you had found it you should be able to see the <div> element with id containing VisibleReportContent above it.
Click on its parent <div> with the id that looks like this “ctl99_ctl99” then look for the overflow style which is currently set to auto as illustrated below. You need to take note of the id as you will use that later.
Change that to visible, then the report now magically appears.
To make the change permanent you have to then go to your SSRS Server then on the path where SSRS is installed you have to do some modifications on the js file called ReportingServices.js. By default in SQL Server 2012 it will be in C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportManager\js
Open the file, you will notice it will be a minified js.
Go to the bottom part then copy and paste the following js code.
The Id below is the one we noted earlier and please bear in mind that this id changes depending on your SSRS Version, mine was 2012 but this also works on 2008 and 2008R2
function pageLoad() { var element = document.getElementById("ctl32_ctl09"); if (element) { element.style.overflow = "visible"; } }
you can also minify it so it looks like this
function pageLoad(){var element=document.getElementById("ctl32_ctl09");if(element){element.style.overflow="visible";}}
BTW I am currently using Chrome 32, Internet Explorer 11, Firefox 26 and Safari 7.0
Sweet! Thanks!
Howdy! I just would like to offer you a huge thumbs up for the great information you’ve got right here on this post.
I am coming back to your blog for more soon.
How is this done in sharepoint integrated mode with SQL 2012 Reporting Services? There is no reportingservices.js file that I can find.
Hi – Have you located the reuired file location in SharePoint integrated mode?
Pingback: Showing TFS SSRS Reports in Chrome and Safari | Forty-Two
I just ran into this issue and found this article very helpful. I have a question: in my case, the page containing the report has a HTML 4 Transitional DOCTYPE. This puts Chrome in “quirks” mode, not standards mode. Does anyone know if simply changing the DOCTYPE to a standards compliant one will provide consistency across browsers and without modifying CSS attributes?
Thanks!
Tom
I have the same issue as oc2viking where the file can’t be found. ssrs2012 and sp2013 integrated mode. How can one solve Safari and Chrome having blank dashboards, individual reports work?
This worked brilliantly for me! We have a mixed browser environment, and Chrome users have been noting that SSRS reports show up blank despite having page numbers unless the IE Tab add-in is used after having upgraded to SQL Server 2012 Enterprise. I implemented this fix in TEST and then PROD environments and it worked fine without needing IE Tab. I had a couple changes/additions to the recommended steps:
– The actual path to the JS file on my servers is C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportManager\js\ReportingServices.js
– I made a copy of the original JS file just in case.
– I had to restart the Reporting Services service, and in one test case I had to force a full refresh of the page in the browser to pull down the updated JS file since it was not picking up the style change.
Thanks a million for posting the solution!
You, sir, are a legend. I wasted a whole afternoon yesterday trying to work out why my report wasn’t showing up before suddenly realising I was using Chrome and just maybe it’d be the typical MS problem of stuff only working in IE. Once I twigged that, I found this blog post and fixed the problem rather than using the broken junk that is IE. Thank you!
This was extremely helpful! Thank you!
Great solution works smoothly… However using the extra options in chrome doens’t work
The elements like VisibleReportContent and ReportArea do not exist in the page for me (SQL 2008). Ideas?
If you copy and paste the code here I might be able to look at it
It’s more the absence of code that is the issue. 🙂 There is no element containing VisibleReportContent nor does there appear to be a div containing the word “ReportArea”.
Many other blogs I’ve seen say there should be elements with the IDs ctl31_ctl09 or ctl31_ctl10 depending on the version of SSRS. There are no elements with either of those IDs in my instance. I tried the code below in ReportingServices.js anyway but not surprisingly it didn’t work:
function pageLoad() {
var element = document.getElementById(“ctl31_ctl09”);
if (element) {
element.style.overflow = “visible”;
}
}
I did happen to find a element which, if I set the size in abolsute pixels, expanded the area to see my chart but the td element didn’t even have an ID.
I have the entire html code from the report which I can email you if you like. I don’t see any way to post it here.
Thanks.
You sir are a champion!
This worked great for me the first time I applied it (SQL 2012, IE 10, applied on 10/15/14). Thank you for that! Recently I noticed that the problem was back (maybe after SQL Server 2012 SP2 install?), with SSRS reports displayed in the browser being chopped in half vertically. My previous JS file change is still there. Searching for the DIV ID in the report page source, the one mentioned in this article is no longer there. It is now called “ReportViewerControl_ctl09”. As before, manually setting overflow to “visible” made the report appear full-width in the frame. Changing the code in the JS file and restarting the SSRS service and even restarting the server has not had any effect. Any ideas on how to deal with this “updated” version would be most appreciated.
UPDATE: It seems only IE 10 is affected by this new issue. I confirmed I am using Browser Mode: IE10, Doc Mode: Standards. I was able to successfully view the report using IE 11, Google Chrome (with and without IE Tab add-in), and Firefox. Go figure. Guess I have to tell everyone to upgrade to IE 11 or just use Chrome since Chrome seems to handle everything.
UPDATE 2: The new element ID for SQL Server 2012 Enterprise SP2 CU3 (64-bit) is “ctl32_ctl09”. I dug that up online after hitting a separate issue with the entire content window failing to render for users with straight Chrome. The criteria pane would show and the report would process with paging visible, but the content failed to render. Using the correct element ID sorta kinda fixed the cut off rendering in IE, but the reports still render better in Chrome (nice one MS!).
UPDATE 3: A) Testing with IE 11 still encountered the “report chopped in half vertically” issue despite the fix described in this article being in place. I found that the real cause was displaying the report in an IFrame. Once I popped the report into its own window, the report rendered correctly.
B) SQL Server does not officially support Chrome until version 2014. The MSDN page for SSRS 2012 has a conspicuous absence of Chrome – https://msdn.microsoft.com/en-us/library/ms156511(v=sql.110).aspx, while the page for SSRS 2014 explicitly mentions it under the “Browser Requirements for Viewing Reports” section – https://msdn.microsoft.com/en-us/library/ms156511(v=sql.120).aspx. SQL Server 2016 moves to a brand new HTML 5-oriented SSRS platform.
Until I can upgrade to at least SQL Server 2014 (hopefully Summer 2016), the Macaalay Way still rules!
Great updates and LOL for this comment “the Macaalay Way still rules!”
Pingback: Fix Reportingservices.js Errors - Windows XP, Vista, 7 & 8
Thank you! This is awesome, because I don’t have to use IETab anymore…
Finally! No longer will I have to look sheepish when I say “Sorry, I don’t know why your report isn’t showing in Chrome”
Thanks for the fix!
Where to find this file in sharepoint integrated mode with SQL 2012 Reporting Services?
Many thanks – it worked for me first time and usually you have to try loads of options first – impressed
Many thanks. Your solution working perfectly. Reporting Server 2012
The fix works great in SSRS 2008 and 2012. Very well documented. Thank you for sharing!!
Does this fix resolve problem for Print option on SSRS report.
Cool. Thanks a bunch!
Thank you for the fix. Making the above changes carts on the reports are being rendered empty with no source. Any suggestions?
Thanks you, that is awesome.
Hi
I’n my case I could not find a function named pageLoad() in the js file.
What amI doing wrong here?
Thank you
Awesome!!! Great fix…..
In my code the ID I found is , “ctl00_ContentPlaceHolder1_ReportViewer1_ctl10” this instead of the type you mentioned .
So , I added this in js file
function pageLoad() {
var element = document.getElementById(“ctl00_ContentPlaceHolder1_ReportViewer1_ctl10”);
if (element) {
element.style.overflow = “visible”;
}
}
But it didn’t worked . Still facing the issue.
Please Help!
I have IE 11, SQL Server 2014. I have been using Chrome to display report manager, but I get a blank page if I enter the url into IE 11. It does not display report manager at all. Tried putting url into compatibility view list bit had no effect. Changed reportviewer.aspx to use Edge for compatibility and not IE 5, which was another suggestion, and that didn’t work. Anyone have suggestions?
This saved me, thanks!!! I am using SSRS 2008 R2 and needed my reports to display in IE v11 and Chrome v50. Chrome was not showing the report content. I added the following js function as indicated in your post:
function pageLoad() {
var element = document.getElementById(“ctl31_ctl10”);
if (element) {
element.style.overflow = “visible”;
}
}
It worked like a charm.
Hi guys, I have put in the page load code in the JS file.
The code even shows in the page source of the web page.
But the report is still not showing in chrome.
When I press F12 and manually change the CTL31_CTL09 to visible from auto, the report shows.
Please someone help me
Great information and I now have reports displaying in Chrome. rsClientPrint Control not available, but this is a victory