This is a migrated thread and some comments may be shown as answers.

Setting Background Color of Reportviewer is causing report to not show

5 Answers 714 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Savan
Top achievements
Rank 1
Savan asked on 28 Apr 2017, 06:06 PM

Hello,

i am using Telerik R1 2017 and created many reports. by default the background color of the report viewer is white. i want to change the background color of the report viewer so that the report stands out. 

i tried below mentioned style

    <style>
        #reportViewer { 
            position:absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
            font-family: 'segoe ui', 'ms sans serif';
            overflow:hidden;
            z-index:-1;
            background-color:ivory;
        }
    </style>

this does sets background color but now the main report is not visible at all. i can only see the color i have selected as background color.

 

Kind Regards,

Savan K. Parmar

5 Answers, 1 is accepted

Sort by
0
Stef
Telerik team
answered on 02 May 2017, 11:51 AM
Hi Savan,

The given CSS applied on the report viewer in the HTML5 Demo does not result in the reported problem.
Since you set the z-order of the DIV element of the HTML5 Viewer, please check if the element is not hidden by other HTML elements.

Also add a style rule that targets only the pages area of the viewer e.g.:
.trv-page-wrapper
  {
      background-color:red;
  }


I hope this helps.

Regards,
Stef
Telerik by Progress
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
0
Savan
Top achievements
Rank 1
answered on 03 May 2017, 07:35 AM

Hi Stef,

this is the body f

<body>
    <div>
        <input id="hidreportname" type="hidden" />
        <input id="hidparameters" type="hidden" />
        
            <div style="float:right;">
                <input type="button" id="btnGenerateInvoice" value="Generate Invoice" class="btn btn-primary pull-right invoicebtn" />
                <input type="button" id="btnGenerateInvoiceSubContractor" value="Generate Sub Contractor Invoice" class="btn btn-     primary pull-right invoicebtn" />
            </div>
       
        <br />
        <div class="box">
            <div class="box-body">
                <div id="reportViewer" class="k-widget">
                    loading...
                </div>
            </div>
        </div>
        @(Html.TelerikReporting().ReportViewer()
                .Id("reportViewer")
                .ServiceUrl("/api/reports/")
                .ReportSource(Model)
                .ViewMode(ViewMode.Interactive)
                .ScaleMode(ScaleMode.Specific)
                .Scale(1.0)
                .PersistSession(false)
                .DocumentMapVisible(true)
        )
    </div>
</body>

the z-index order is set for first DIV where button is getting created. if i comment the z-index line in that case the document map section of report gets displayed but the rest of report doesn't show. if i use the z-index line then it doesn't even show the document map section

 

Kind Regards,

Savan K. Parmar

0
Savan
Top achievements
Rank 1
answered on 04 May 2017, 11:45 AM

Hi Stef,

no runtime page wrapper class is getting generated, can you please give an example of how to set background color that targets only the page area? it would be helpful

 

Regards,

Savan K. Parmar

0
Savan
Top achievements
Rank 1
answered on 04 May 2017, 12:04 PM

Hi Stef,

the code snippet you gave worked for me when i placed it in telerikReportViewer.CSS.

the background color is now changed.

 

Thanks & Regards,

Savan K. Parmar

0
Stef
Telerik team
answered on 04 May 2017, 01:09 PM
Hi Savan,

Thank you for this update.

If you need to use custom CSS and Javascript for the viewer, my recommendation is to place it on the page instead of in the viewer's templates. if there are changes in the viewer's templates, you will have to upgrade them manually.

Regards,
Stef
Telerik by Progress
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
Tags
General Discussions
Asked by
Savan
Top achievements
Rank 1
Answers by
Stef
Telerik team
Savan
Top achievements
Rank 1
Share this question
or