Report Viewer container shrunk

[Andrew Jang]

Hi there, 

I've created a rdlc report and tried to load it using the report viewer.

Here is how my view looks like:

<h2>ReportView</h2>

<div class="row">

    @(Html.EJ().ReportViewer("viewer").ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Local)

.ReportPath("~/Reports/Report1.rdlc")

.ReportServiceUrl("/api/ReportApi")

.DataSources(ds => ds.Name("DataSet1").Value(ViewData["reportDsource"]).Add()))

    </div>

And this is how it renders:

I've inspected its elements and realized that there is a class called "element.style" that sets the height of the report viewer to 24 px every time which is the cause of the issue.

Is there a property in the report view where I can manually set the height of the report view container?

How can I troubleshoot this?

[Vinoth Srinivasan]

Hi Andrew, 

Thanks for your interest in Syncfusion components. 

We need to set the width and height to the ReportViewer container using style property as shown in below code example to resolve this issue., 

<div style="width:100%; height:100%; position:absolute;"> 

@(Html.EJ().ReportViewer("reportsample") 

.ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Remote) 

.ReportServiceUrl(VirtualPathUtility.ToAbsolute("~/api/RDLReport")).ReportPath("~/App_Data/GroupingAgg.rdl")) 

</div> 

 

Regards,  

Vinoth S. 

[Gökhan]

I would like to use Report Viewer in my existing page layout. My layout structure is 

<div class="main-container col2-left-layout">

    <div class="container"> 

           <div class="row">

                <div class="col-lg-12">

                    <div style="width:100%; height:100%; position:absolute;">

                          @{Html.EJ().ReportViewer("ReportViewer").ReportPath("~/Sources/reports/invoice.rdl").ReportServiceUrl("/api/ReportApi").Render();}

                     </div>

                </div>

            </div>

        </div>

 </div>

It calculates the height of the ReportViewer_viewerContainer as 

 <div class="e-reportviewer-viewer e-reportviewer-scrollcontainer e-reportviewer-viewercontainer e-waitingpopup e-js" id="ReportViewer_viewerContainer" style="height: 0px; width: 100%; font-size: 8pt;">

[Vinoth Srinivasan]

Hi Gokhan, 

We request you to share your view and layout.cshtml file with us and it will be helpful for us to provide the solution at the earliest. 

Regards, 

Vinoth S. 

[Hetal Patel]

I am running into the same issue. How to change the height of the .e-reportviewer-viewer in angular. by default, it shows "height:114px"; (Inline) How do I change it to 100%?

[Arumugasami Murugesan]

Hetal Patel,

We have created a support ticket for this issue by using the below link. We will update the further details in the created ticket. If you face any other issues, we suggest you open a new ticket using your account.

https://support.boldreports.com/create