Grid borders problem with angular report viewer

3 posts, 1 answers
  1. Ivan
    Ivan avatar
    5 posts
    Member since:
    Jun 2018

    Posted 28 Aug 2018 Link to this post

    Hello

    I'm having a problem when displaying report in angular report viewer. Preview in Report designer and export to PDF option from the viewer are displaying grid correctly. See attached images. I set border width to 1px instead of 1ptas mentioned in similar thread here on the reporting forums but to no avail.

     

    Thanks in advance.

  2. Answer
    Todor
    Admin
    Todor avatar
    285 posts

    Posted 31 Aug 2018 Link to this post

    Hello Ivan,

    We have responded to your query in the support ticket you opened on the same case. For the benefit of our community I will summarize the answer also in this forum post:

    In Html rendering all report items are rendered as separate absolute positioned <div> elements. The problem is most probably related to external styles applied to those elements, hence the different layout compared to the document rendered in PDF or in Preview in the designer.

    You can check whether the report will be rendered correctly by our Html5 or Angular demo projects.

    Regards,
    Todor
    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
  3. Ivan
    Ivan avatar
    5 posts
    Member since:
    Jun 2018

    Posted 03 Sep 2018 Link to this post

    Hello,

    I'll post my resolution here also, in case someone else is struggling with the similar problem.

    Problem was indeed in the external styles. In my case, it was bootstrap's reboot default box-sizing. Workaround was to revert it from border-box to content-box for trv-report-viewer CSS class. Like this:
    .trv-report-viewer,
    .trv-report-viewer *,
    .trv-report-viewer *::before,
    .trv-report-viewer *::after {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    Kind regards,
    Ivan
Back to Top