HTML5 Report Viewer Chart Object CSS Error

[Sergio]

Greetings 

I have a very strange behavior with the HTML5 Report Viewer. The report display in proper size in any other Report Viewer. However, when it comes to displaying the chart (and only chart)objects or elements that are full in size along with the page, the reportviewer is cutting the chart height and width and is not displaying the chart completely.

When it comes to export,  the application even export in the proper size as it displays in other report viewers. However, it is just display wrong.

Please see the below example.


In my scenario the page settings are 
Landscape - Left 0.5, Right 0.5
and the Chart object Display is given the following sizing 

Telerik.Reporting.Drawing.Unit Height = new Telerik.Reporting.Drawing.Unit(15, ((Telerik.Reporting.Drawing.UnitType)(Telerik.Reporting.Drawing.UnitType.Cm)));
            Telerik.Reporting.Drawing.Unit Width = new Telerik.Reporting.Drawing.Unit(25, ((Telerik.Reporting.Drawing.UnitType)(Telerik.Reporting.Drawing.UnitType.Cm)));

_chart.Size = new Telerik.Reporting.Drawing.SizeU(Width, Height);
            _chart.Location = new Telerik.Reporting.Drawing.PointU(new Telerik.Reporting.Drawing.Unit(0.32, ((Telerik.Reporting.Drawing.UnitType)(Telerik.Reporting.Drawing.UnitType.Cm))), new Telerik.Reporting.Drawing.Unit(1.8, ((Telerik.Reporting.Drawing.UnitType)(Telerik.Reporting.Drawing.UnitType.Cm))));

And again, the report display perfectly in any other reportviewer and at export time

Please any insight, idea, clue or guidance will be fully appreciate it.

Thanks

[Sergio]

Greetings

For now I just apply the following CSS fix which is to provide the img element of the chart with the size of the parent div.

div[class*=" s2-"] > div > img
        {
            width: 945px !important;
        }

Please let me know if there is another more appropriate solution

The license in question is 2013 Q3 by the way

Thanks

[Stef]

Hello Sergio,

The reason for the Chart item to appear clipped is that it is larger than the page sizes defined by the report's PageSettings properties - these properties take effect only in Print Preview of the report and when it is exported in a physical page format as PDF.

The Chart is always kept together and if it is larger than the available space there would appear a blank space and then its content would be split. For more details check the Understanding Pagination help article.

You can make the item smaller or change the report's PageSettings to avoid splitting the Chart image between pages.

Regards,
Stef
Telerik

 

 

[Sergio]

Greetings Stef

And Thank you for your response. However, let me clarify.

The chart do display correct on export and also display correct on other report viewers as well. 

The only report viewer that have this clipped effect is the HTML 5 report viewer. If the chart object would have been greater than the page size, this behavior will also be evident in other report viewers as well. Doesn't it? 

Also importantly, exporting from the HTML5 report viewer, the PDF formats and such do come in the correct size.

Other objects in the same report that have the same size as the chart, -  tables do display in the correct size as well. It is only the chart objects that seem to have this problem.

Could you clarify, what I may have missing?
Thank you

[Stef]

Hello Sergio,

If all other viewers display the Chart item on a single page and the exported PDF file produces a single page with the Chart, we will need a runnable demo project to test your settings. There might be global styles messing with the styles of the viewer. Please test to exclude any external styles and stylesheets from the page.

You can also compare your report settings to the attached report. When you run its Print Preview you can notice how the image of the Chart is separated between pages.

Regards,
Stef
Telerik