Angular Report Viewer issue after upgrade to

2 posts, 0 answers
  1. Kanoo
    Kanoo avatar
    7 posts
    Member since:
    Mar 2017

    Posted 12 Sep 2018 Link to this post

    I'm facing report viewer issue after upgrading to Telerik.Reporting I'm using NuGet Package.

    The Problem is the report started to display like Image 1 after upgrade. 

    I tried to fix it little bit by adding the below styles

    .trv-report-page {
      height: 700px !important;
    .trv-report-page > .sheet {
      height: 700px !important;

    Now the report is showing but with 2 horizontal scrollbars as Image 2.

    Here is my container style

    const viewerContainerStyle = {
        position: 'relative',
        width: '100%',
        height: '800px',
        ['font-family']: 'ms sans serif'


  2. Silviya
    Silviya avatar
    422 posts

    Posted 17 Sep 2018 Link to this post

    Hi Kanoo,

    From the attached screen shots it seems that Kendo stylesheet is not loaded correctly or referring older/different versions. Please make sure that you are referring the same versions of kendo styles - step 8 from How To: Use Angular Report Viewer with Angular CLI help article. I assume that the scroll bars appears because the report is wider than the sheet area.
    Test running the sample Angular application that comes from Telerik Reporting installation directory - C:\Program Files (x86)\Progress\Telerik Reporting <VERSION>\Examples\Angular\CLI and compare your settings with the sample ones.
    Additionally, it is not necessary to add any additional styles to .trv-report-page class. 

    In case the issue still persist, open new support ticket and attach the problematic project for further investigation on our side.

    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