This is a migrated thread and some comments may be shown as answers.

Bootstrap and HTML 5 Report Viewer

10 Answers 743 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 19 Jan 2014, 06:07 AM
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

10 Answers, 1 is accepted

Sort by
0
Stef
Telerik team
answered on 21 Jan 2014, 04:01 PM
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

New HTML5/JS REPORT VIEWER with MOBILE AND TOUCH SUPPORT available in Telerik Reporting Q3 2013! Get the new Reporting version from your account or download a trial.

0
Mark
Top achievements
Rank 1
answered on 26 Jan 2014, 02:46 AM
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  
0
Mark
Top achievements
Rank 1
answered on 26 Jan 2014, 02:48 AM
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
0
Stef
Telerik team
answered on 28 Jan 2014, 05:47 PM
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

New HTML5/JS REPORT VIEWER with MOBILE AND TOUCH SUPPORT available in Telerik Reporting Q3 2013! Get the new Reporting version from your account or download a trial.

0
Mark
Top achievements
Rank 1
answered on 06 Feb 2014, 08:02 PM
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.  

























0
Mark
Top achievements
Rank 1
answered on 06 Feb 2014, 08:21 PM
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
0
Stef
Telerik team
answered on 10 Feb 2014, 12:22 PM
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

New HTML5/JS REPORT VIEWER with MOBILE AND TOUCH SUPPORT available in Telerik Reporting Q3 2013! Get the new Reporting version from your account or download a trial.

0
Mark
Top achievements
Rank 1
answered on 10 Feb 2014, 07:39 PM
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
0
Rob
Top achievements
Rank 1
answered on 14 Jun 2014, 03:27 AM
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). 
0
Stef
Telerik team
answered on 17 Jun 2014, 10:04 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
General Discussions
Asked by
Mark
Top achievements
Rank 1
Answers by
Stef
Telerik team
Mark
Top achievements
Rank 1
Rob
Top achievements
Rank 1
Share this question
or