Hello,
I upgraded our WebForms ReportViewer to the MVC HTML5 ReportViewer. Chrome and Edge work fine, but not our IE 11 browser.
The ReportViewer toolbar displays successfully, and while the content of the pages is in the DOM, it is not displaying in the browser. Using the F12 Developer Tools, I noticed if I manually change the .trv-content flex option from flex: 1 1 0 to flex: 1 1 1, the content displays successfully.
I added the TelerikReportViewerTemplate.html to my report page and pointed the css to the telerikReportViewer.css file. I added the telerikReportViewer.css to my project and overrode the css to flex: 1 1 1. While the override worked, the content was still hidden. Again, if I manually change the value using the F12 tools, the content displays.
I was finally able to update the CSS replacing the flex with display: flex; but, then the print preview does not center on the page, in any browser. This is what I will work with if I can't figure out anything else.
Interestingly, I can view the Telerik Reporting demo's just fine in IE.
Do you have any suggestions for my situation?
3 Answers, 1 is accepted
Rank 1
I should also mention I had to add the following to my local CSS file otherwise the reportviewer would not display either:
.trv-report-viewer div.trv-content-wrapper, .trv-pages-area, .trv-pages-area .trv-page-container {
position: static !important;
}
Rank 1
I should also mention that I had to add the following CSS or the reportviewer would not display at all:
.trv-report-viewer div.trv-content-wrapper, .trv-pages-area, .trv-pages-area .trv-page-container {
position: static !important;
}
The demos work fine under IE because they have some adjustments made in order to be displayed properly:
1. Doctype:
<!DOCTYPE html>2. Meta tags:
<meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />3. CSS:
#reportViewer1 { position: absolute; left: 5px; right: 5px; top: 40px; bottom: 5px; overflow: hidden; clear: both;}The CSS can also be adjusted to use relative position:
#reportViewer1 { position: relative; width: 1000px; height: 800px; overflow: hidden; clear: both;}where #reportViewer1 is the ID of the div element wrapping the report viewer:
Regards,
Nasko
Progress Telerik