Hi
i made a web telerik report. I joined a screenshot to show exactly what is my problem. As you can see, the report is fine but there is a line at the left ( look at the red arrow ), it assume that it is the viewer template border. I would like it to be left aligned with the beginning of the toolbox.
I tried to look in debug to see what is the problem with the html and honestly i cannot figure. however, the pointer i debug seems to target the line below but i'm not sure :
<div class="trv-pages-area k-widget" tabindex="1000" data-role="telerik_ReportViewer_PagesArea" role="main" aria-label="Report contents area">
anyway, this is the code section in the template :
<div class="trv-content" role="form">
<div class="trv-document-map k-widget hidden" data-role="telerik_ReportViewer_DocumentMapArea" >
<div tabindex="200" class="trv-document-map-overlay" role="navigation" aria-label="Document map area"></div>
</div>
<!--<div class="trv-parameters-area k-widget hidden" data-role="telerik_ReportViewer_ParametersArea" >
<div tabindex="300" class='trv-parameters-area-content' role="complementary"></div>
<div class='trv-parameters-area-footer'>
<button tabindex="399" aria-label="Afficher le rapport the report" class='k-button trv-parameters-area-preview-button'>Afficher</button>
</div>
<div class='trv-error-pane k-tooltip-validation k-widget'>
<div class='trv-error-message'></div>
</div>
<div class="trv-parameters-area-overlay"></div>
</div>-->
<div class="trv-pages-area k-widget" tabindex="1000" data-role="telerik_ReportViewer_PagesArea" role="main" aria-label="Report contents area">
<div class='trv-page-container'>
<div class='trv-page-wrapper active'></div>
</div>
<div class='trv-error-pane'>
<div class="centered k-tooltip-validation k-widget">
<div class='trv-error-message'></div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
1 Answer, 1 is accepted
I tested to include the provided code snippet in the appropriate position of our telerikReportViewerTemplate.html template, and set the path to the latter as templateUrl for the Html5 Report Viewer in our CSharp.Html5Demo project. The viewer was displayed as expected, without misalignments. Only the Parameter area was empty - check the attached ViewerParameterAreaHidden screenshot.
When I uncommented the viewer Parameter area-related code (it is commented in the snippet), the Parameter area was also displayed correctly.
I was not able to reproduce the issue by modifying the viewer's template, hence my assumption is that the problem is related (at least partially) to something else.
On the screenshot sans-titre111 I noticed that there is a custom parameter area left from the viewer, and no viewer Parameter area.
The empty space left from the Pages area of the viewer is generally preserved for the Document Map area when there is one in the report. When I commented the Document Map area in the provided snippet (lines 2-4) the Pages area looked misplaced, like on your screenshot (sans-titre111) - check ViewerSideAreaHidden screenshot. Hence, the problem may be in the configuration of the Document Map area in the template.
The above observations and the fact that the Toolbar from the screenshot is not complete - Toggle Print Preview and other menu items are missing, make me assume that the entire template is modified, which may have caused the issue.
The problem may be related also to custom CSS styles applied to the viewer - either in the template, or in the page where the viewer is used.
Regards,
Todor
Progress Telerik