CODEWITHSUNDEEP
asp.netreportviewerreport-viewer2010
Rahul Jain
Rahul Jain

Reputation: 622

Report viewer width & background issues

I'm new to reporting services and having trouble getting a report to render correctly on my ASPX page. I have applied following properties on MS Report viewer 10 using with asp.net 4.0

AsyncRendering="true" SizeToReportContent="true" Width="100%"

enter image description here

my report has taken background color of page instead of taking white color, width is also not applied correctly. above is the screen shot for the same.

Any suggestions appreciated!!

Upvotes: 1

Views: 5115

Answers (1)

JotaBe
JotaBe

Reputation: 39014

Wrap the ReportViewer in a div. Set the width (usually 100%) and background color (should be white) in your wrapping div.

This will solve the background problem. However you'll still have different problems with different browsers: the problems differ from browser to browser and version to version.

In ReportViewer 11.0 (you can easily check your ReportViewer version in web.config), even if you set the width to 100% you'll get the blank space on the right on most cases. The only way to fill it up would be to apply style "width:100%" to a table which is inside the rendered report viewer HTML.

The id for this table is the ClientId of the ReportViewer control, with a _fixedTable suffix. For example if the client id of the report control is Container1_Container2_ReportViewer1, there will be a table wiht the id Container1_Container2_ReportViewer1_fixedTable. If you apply the style to this table, it will take up all the space. Checked in current versions of FF (25), IE (10) and Chrome (31).

If you always render the report in the same page, the ClientId, and thus the fixed table id, will always be the same, so you could add this in your .CSS file:

#Container1_Container2_ReportViewer1_fixedTable {
width: 100%
}

If this is not the case, you could use a CSS3 selector like this:

table[id$='_fixedTable'] {
width: 100%
}

Which selects all tables which have an id which ends with _fixedTable. The exact CSS that you use will depend on your particular case, but remember that the most specific, the better (apply it only to the affected page or pages, apply it to a known container... remember that the "ends with" will check all the tables in the browser). So you can do something like this:

<style type="text/css">
    #<%=reportViewer.ClientID%>_fixedTable {
        width: 100%;
    }
</style>

Be warned that there's no guarantee that this will solve the problem for all versions of all browsers. The HTML of reportViewer is so complex and tricky, that it's bound to provoke problems. Older versions of reportViewer had different problems and required different solutions.

Upvotes: 4

Related Questions