New to Telerik Reporting? Download free 30-day trial

How to display Preview button of Html5 Viewer's parameters area at the top of the area


Product Progress® Telerik® Reporting


The Preview button of the Html5 Viewer's Parameters area is displayed when at least one of the Report paramters is Visible. By design, the button is displayed at the bottom of the area. The article elaborates on how to move the Preview button at the top of the parameter editors.


You need to add CSS styles that modify the default position of the button and the content in the viewer's Parameters area. The Preview button is positioned in the footer of the area and can be selected by '.trv-parameters-area.preview .trv-parameters-area-footer'. The parameter editors themselves are located in the content part of the area and can be selected by '.trv-report-viewer .trv-parameters-area.preview .trv-parameters-area-content'. Here is sample code for the page hosting the Html5 Viewer with Preview button at the top of the Parameter's area:

<!DOCTYPE html>
<html xmlns="">
        #reportViewer1 {

        .trv-parameters-area.preview .trv-parameters-area-footer {
            top: 0;

        .trv-report-viewer .trv-parameters-area.preview .trv-parameters-area-content {
            top: 3em;
            bottom: 0;
    <div id="reportViewer1">

    <script type="text/javascript">
        $(document).ready(function () {
In this article