This is a migrated thread and some comments may be shown as answers.
HTML5 ReportViewer content hidden in IE browser
3 Answers 35 Views
This is a migrated thread and some comments may be shown as answers.
Peggy
Top achievements
Rank 1
Peggy asked on 16 Jul 2018, 06:31 PM

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

Sort by
0
Peggy
Top achievements
Rank 1
answered on 16 Jul 2018, 06:41 PM

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;
}

0
Peggy
Top achievements
Rank 1
answered on 16 Jul 2018, 06:42 PM

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;
}


0
Nasko
Telerik team
answered on 17 Jul 2018, 04:02 PM
Hello Peggy,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Peggy
Top achievements
Rank 1
Answers by
Peggy
Top achievements
Rank 1
Nasko
Telerik team
Share this question
or