toolbar and report viewer not aligned

2 posts, 0 answers
  1. John
    John avatar
    5 posts
    Member since:
    Dec 2018

    Posted 14 Dec 2018 Link to this post


    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 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 class='trv-error-pane k-tooltip-validation k-widget'>
    <div class='trv-error-message'></div>
    <div class="trv-parameters-area-overlay"></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 class='trv-error-pane'>
    <div class="centered k-tooltip-validation k-widget">
    <div class='trv-error-message'></div>
    <div style="clear: both;"></div>

  2. Todor
    Todor avatar
    514 posts

    Posted 19 Dec 2018 Link to this post

    Hi John,

    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.

    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
Back to Top