CSS issue with Page controls in Report Viewer toolbar

[Luke]

We have the Telerik report view embedded in an MVC app.  We are seeing a UI problem where on the initial load of the report, the page number controls (e.g. "1 of 101") get bumped off the toolbar, making the report viewer look ugly. 

Some observations:

- This only happens in IE9.  Chrome, Firefox and IE8 all work great.
- It only happens when you have > 9 pages in the report.
- If you touch any of the controls on the toolbar, the controls jump back up into their correct position. 

The later point is making this issue difficult to troubleshoot, because if we edit the CSS using IE developer tools, any change to the CSS automatically fixes the problem.  E.g., just the act of changing a CSS element bumps the controls back into place.  But the problem persists on the next load of the report. 

Attached are screen shots of the problem, as well as a screencap of the CSS that's getting applied to the offending DIV tag. 

[Steve]

Hi Luke,

Unfortunately we have not been able to reproduce this in our local tests and the fact that it occurs only in IE 9 and any change triggers the correct rendering, sounds like an issue with the browser itself. Since it renders fine in other IE version, have you tried adding compatibility mode to your page? You can find more info how to control that from the following links:

• Defining Document Compatibility
• Testing sites with Browser Mode vs. Doc Mode

Kind regards,
Steve
the Telerik team

[Tino]

Dear Steve,

We have the same problem with the asp.net reportviewer. Only in IE 9.

[Luke]

Steve, thanks for your response.  We've setup our MVC layout to put our ReportViewer page in IE=8 mode, that fixes the problem for us.  Not the most elegant solution, but it's working and we're not seeing any other consequences from that solution so the problem is solved for us.  Thanks for your response. 

[Sheeraz]

Hi Steve,

I facing the same issue, I have applied theme to my application from web.config.
It gets applied on the telerik report viewer as well. I have tried this property EnableTheming = "false" on crystal report, even in page directive but it is not getting resolved. Telerik Report Viewer is being effected by Theme applied. I have tested it in IE 10, Chrome, Firefox. I am using the trial version Q2, 2013 of telerik reporting. I am evaluating the product so that I may purchase the licences of this product. Please help me out in this regard. It is urgent as I have shortage of time.

Regards
Sheeraz Raza

[Stef]

Hello Sheeraz,

Please take a look at the suggested changes in the default CSS file in the following blog post: Telerik Reporting in MVC? Sure. It takes 8 quick steps. The same should be applied in the styles of your theme in order to maintain the original ASP.NET ReportViewer styles.

In addition, as of  Telerik Reporting Q3 2013 there will be a new HTML5 Report Viewer which may suite better your requirements. More details about the new features can be found in the Bringing the Power of HTML5 to Telerik Reporting blog article.

Regards,
Stef
Telerik