HTML5 ReportViewer content hidden in IE browser

4 posts, 0 answers
  1. Peggy
    Peggy avatar
    14 posts
    Member since:
    Mar 2013

    Posted 16 Jul Link to this post

    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?

  2. Peggy
    Peggy avatar
    14 posts
    Member since:
    Mar 2013

    Posted 16 Jul in reply to Peggy Link to this post

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

  3. Peggy
    Peggy avatar
    14 posts
    Member since:
    Mar 2013

    Posted 16 Jul in reply to Peggy Link to this post

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


  4. Nasko
    Admin
    Nasko avatar
    1021 posts

    Posted 17 Jul Link to this post

    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
Back to Top