Bootstrap and HTML 5 Report Viewer

[Mark]

I am using Bootstrap on a page that has the HTML 5 Report Viewer and the HTML 5 Report Viewer completely goes away.  If I remove the link to Bootstrap the HTML 5 Report Viewer is shown and works again.

I am using Bootstrap on all of my other pages.  How can I get Bootstrap to work on the pages where I have the HTML 5 Report Viewer?

Thanks and Best Regards,

Mark Kilroy

[Stef]

Hello Mark,

By default the HTML5 Report Viewer uses Font Awesome for its icons. Also Kendo UI styles and Javascript as described in the Styling and Appearance help article. In the latest available internal build there is added support for newer Font Awesome versions.

Please check if you have included all required resources(CSS, Javascript/HTML template) and styles are applied correctly over the div container of the viewer. In case the viewer's template is modified, please open a support ticket and send us details about the made modifications, applied bootstrap themes and Javascripts.

Regards,
Stef
Telerik

[Mark]

No it is not a problem with Font Awesome.  The Report viewer will work on any page where I do not include the reference to the bootstrap.css file 

For example I have @Styles.Render("~/Content/bootstrap/bootstrap.css") in my layout page for reporting forms.  If I comment this line out then the Report viewer works but if I  

[Mark]

uncomment the line then the report viewer will not work.  I think it will be a big deal for Telerik if the report viewer will not work on forms that have a reference to bootstrap.

Best Regards,
Mark Kilroy

[Stef]

Hello Mark,

Please take a look at the attached sample project. The bootstrap.css and bootstrap.js are included in the view, and the viewer is displayed correctly. Please compare the settings to your original project ones.

If you need further help, provide us with exact steps how to modify the example to reproduce the issue at our end, or open a support ticket and send us a runnable project illustrating your settings.

Regards,
Stef
Telerik

[Mark]

OK, I found the issue.  
1) When using Bootstrap the reportviewer's position must be set to relative.  If it is set to absolute the report viewer will not be viewable.
<style>
        #reportViewer1 {
            position: relative;
            width: 100%;
            height: 1000px;
            font-family: 'segoe ui', 'ms sans serif';
            overflow: hidden;
        }
    </style>
2) The example you sent to me to test had a few bugs most I could fix.  But the file ReportViewer-7.2.13.1216 had an error on the ValidateClientID.   I did find that this would work if the reportviewer position is not set to absolute which is the main issue, I believe.  

[Mark]

I did make one change although I did not use the ReportViewer-7.2.13.1216.css and ReportViewer-7.2.13.1216.js files.  I did use the telerikReportViewerTemplate,html template file.  As I am checking in my sourcecode I do see a lot of changes in that file.  That might be related to the issue as well.  Although definitely the issue goes away when the reportviewers positon is set to relative from absolute.

Best Regards,
Mark

[Stef]

Hello Mark,

Thank you for your update.

In general, the report viewer and its content are rendered within a div element, which id is the name of the viewer. This element can be styles as needed, by default in our examples the viewer occupies the whole space with 5px offset.

About the received error, in cases you have upgraded Telerik Reporting assemblies references, you need to update the viewer's templates as well. In our examples and tutorials the templates are placed in the ReportViewer folder. Note that CSS and Javascript files have the version of the product in their names, thus you need to update the references to these files as well.

Regards,
Stef
Telerik

[Mark]

1) The issue is that you cannot use the reportviewer with position absolute.

I am glad that this is now fixed.
Best Regards,
Mark Kilroy

[Rob]

Is there a way to do this without an absolute pixel height? When I try with height: 100%; all I see rendered is a thin black line instead of the report viewer. The whole reason we are using bootstrap is to support devices of varying dimensions (tablets, desktop, etc). 

[Stef]

Hi Rob,

The content of the viewer is rendered within a DIV element with the ID of the viewer. Using CSS rules, you can set thow the DIV to be displayed. When you use percentage units to set the width and the height of the Div, it will size itself based on the container element. You can also use the approach for setting sizes described here.

Regards,
Stef
Telerik