Increase width of parameter area

[Christiaan]

I have enabled the parameter area in the report (HTML5) and was able to render custom controls, but it is not wide enough. I want to increase the width from 15em to 22em. 

I have tried to update the css of the telerikviewer to 22em, but then the report area slides under the parameter area. I haven't found what is calculating the width of the report viewer itself. Is that done in javascript, or described in css.

Can you help me how to increase the width of the parameter area?

[Stef]

Hi Christiaan,

The HTML5 Viewer's styles are defined in the telerikReportViewer.css file. The file is linked in the viewer's HTML template file, that will have to be set through the templateUrl property if you want to load a modified version of the CSS file - Providing Templates.

Other approach will be to include the CSS on the page with the viewer.


Please note that modifications will have to be maintained manually in case of changes in the viewer's CSS file.

Regards,
Stef
Telerik by Progress

[Christiaan]

I have been able to increase the width of the parameter area, but the width of the reportviewer is not set through css. Its width however is set as an explicit width on the DOM element.

So my question is how to reduce the width of the middle area between the document map and the parameter area. I was unable to figure that out.

[Stef]

Hi Christiaan,

Modifications of the default templates due to custom requirements are out of the support scope. We can provide you only general information about the available features.

In this case, the viewer's areas are declared in the HTML template - see <div class="trv-content">, that HTML file can be loaded by setting the viewer's templateUrl - Providing Templates.

The HTML file contains a link to telerikReportViewer.css that contains the styles applied to the HTML of the viewer. The CSS has selectors like .trv-document-map, .trv-parameters-area, .trv-pages-area targetting the viewer's areas for displaying parameters, in-document navigation, pages. The attached video illustrates how we resize the viewer's areas only to demonstrate the layout of the viewer and its styles. The video is a SWF file that can be previewed in IE browser.

Regards,
Stef
Telerik by Progress