SSRS : Reports Rendering issues with Firefox and Safari Browsers

1 12 2009

As part of our project, we need to execute the reports on different platforms and browsers to check the compatibility of reports in different versions and variants of web browsers. While development was in progress, I could never concentrated on this issue , as I am pretty sure that reports will execute in all the browsers without any hassle. But when I tried to execute the reports in Firefox, Safari and some other third party browsers as part of my unit testing I have noticed that the format of the report is being messed up highly and the structure is weird. I had to spend some more time at the end for the development (of course, it happens for all the software projects) to overcome this issue.

I would like to share with you the knowledge I have obtained as part of my research and also save your time to not go for a detailed research like me.

What is the process behind the Reports Execution in the browsers?

As you might be aware that, Report Manager is a pure web based HTML site. When we deploy our reports which were developed in the BIDS onto the Report Manager, SSRS converts the report definition language into the HTML syntax for the easy rendering of the reports on the server.

SSRS 2005 is pretty slick, but the HTML is just terrible. Reports are displayed in an IFRAME that’s deep in nested table land, and the IFRAME’s height setting only works in IE. The end result is that reports don’t display correctly in Firefox, Safari etc – the IFRAME’s height defaults to a few hundred pixels, so you only see the top 2 inches of the report.

What would be the work around?

The simplest workaround would be install the IE add-on for the Firefox which is available freely at the below location. But this does not solve our whole problem, as it is not practically feasible to install IE add-on in each machine which is used by the end user. We should concentrate in finding the solution at the server level and most importantly at the execution engine level

Download Firefox IE Add-on

https://addons.mozilla.org/en-US/firefox/addon/1419

However, they did the right thing by designating CSS classes for most of the important elements, so we can fix it by adding a min-height setting. I’m sure there are other issues with getting SSRS to display correctly in Firefox, and possibly other answers (let me hear them in the comments below), but this CSS fix at least lets the reports show.

Workaround # 1:

1. Go to the following Location, where SQLServer is installed…\Program Files\Microsoft SQL Server\MSSQL.3\ReportingServices\ReportServer\Pages

2. Open ReportViewer.aspx File add the style property marked in bold and blue color, Then try this style=”display:table;margin:0px;overflow:hidden”runat=”server”/>

If not Helps the first method, then try the Workaround 2.

Workaround # 2

 /* Fix report IFRAME height for Firefox, Safari */

.DocMapAndReportFrame
{
    Min-height: 860px;
    Min-width: 1000px;
}

 

Put this code at bottom of the ReportingServices.css file. After you added this code, Close your browser and clear your cookies then try again

If you’re really lazy, you can just run this batch script which will make the change for you:

::Add to C:\Program Files\Microsoft SQL Server\MSSQL.3\Reporting Services\ReportManager\Styles\ReportingServices.css
SET CSSFILE=%ProgramFiles%\Microsoft SQL Server\MSSQL.3\Reporting Services\ReportManager\Styles\ReportingServices.css
IF NOT EXIST “%CSSFILE%.bak” COPY “%CSSFILE%” “%CSSFILE%.bak”
echo. >> “%CSSFILE%”
echo. >> “%CSSFILE%”
echo /* Fix report IFRAME height for Firefox */ >> “%CSSFILE%”
echo .DocMapAndReportFrame >> “%CSSFILE%”
echo { >> “%CSSFILE%”
echo     min-height: 860px; >> “%CSSFILE%”
echo } >> “%CSSFILE%”

Notes / Disclaimers / Retractions

This just adds a min-height attribute to the class used for the IFRAME. Of course, you can set the min-height to another value if you’d like; if you make it larger than your end user’s screen height they’ll see a scroll bar and may go into convulsions.

This change isn’t needed for IE7. One of the big changes to IE7’s CSS handling is that it will stop treating height and width as min-height and min-width, but IE7 and Firefox still treat height=100% differently (at leat for IFRAMES).

Please let me know if there’s a better way to fix this, more to be fixed, etc.

Advertisements

Actions

Information

11 responses

11 07 2011
Hima

Thank you! Workaround #2 helped me resolve the rendering issues in Safari browser.

11 07 2011
VK Sangisetti

Thanks for visiting my blog….glad to hear that it helped you to resolve your issue…..

25 01 2012
MG

Thanks for this!
Work Around #1 seems to be missing something. The 2nd step is confounding. For you refer to something “in bold and blue color” but there is nothing in this blog that is bold and blue color.
Here is the relevant part of ReportView.aspx can you clarify where (or what) needs to be changed (or added)? Thank you in advance for your kind help.

Sys.WebForms.PageRequestManager.prototype._destroyTree = function(element) {
var allnodes = element.getElementsByTagName(‘*’),
length = allnodes.length;
var nodes = new Array(length);
for (var k = 0; k < length; k++) {
nodes[k] = allnodes[k];
}
for (var j = 0, l = nodes.length; j = 0; k–) {
behaviors[k].dispose();
}
}
}
}
}

25 01 2012
MG

it cut out a bunch of HTML, so my “relevant” part isn’t so relevant. Can you take a look at what you advise for Step 2 of Workaround #1 and clarify? Thanks in advance.

25 04 2012
JohnE

Very informative and fixed few

19 06 2012
singanan

Thanks for the useful info.. my issue is , the lines are not rendered in firefox.. it displays as a junk object where ever the line present

12 06 2013
Rice Cooker Reviews Steamers

You’re so awesome! I do not believe I have read through something like that before. So good to find another person with a few original thoughts on this subject. Really.. thank you for starting this up. This website is something that is needed on the web, someone with a little originality!

2 07 2013
Paulina

I am sure this post has touched all the internet people, its really really fastidious post on
building up new web site.

3 07 2013
Order Anatomy X5

Tremendous issues here. I’m very satisfied to peer your post. Thank you a lot and I’m having
a look ahead to contact you. Will you please drop me a e-mail?

31 07 2013
dialog:close

Ahaa, its fastidious conversation on the topic of
this post here at this webpage, I have read all that, so now me also commenting here.

7 09 2013
http://onebookonebakersfieldonekern.com/

You have a good website! Can you up-date it generally?
Would you mind if we talk about this site together with buddies with zynga?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: