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