[Solved] Printing Page Breaks in IE9

[Rick Glos]

I have an issue where the chart gets a page break in the middle of it in IE9, whereas this does not occur in Chrome or Firefox.  Is there anything I can do about that?

For example, throw this chart on a page and repeat it 6 times then try printing in IE9, note that if a chart doesn't fit on the page, it gets cut in half with part of it on one page and part if it on another.

<div style=" width: 640px; height: 480px;">
@(Html.Telerik().Chart()
        .Name("chart")
        .Title("Test 1")
        .Series(series => {
            series.Bar(new int[] { 2015, 6003, 6881 }).Name("Representative Sales");
            series.Bar(new int[] { 15458, 26598, 27623 }).Name("Total Sales");
        })
            .CategoryAxis(axis => axis.Categories(new string[] { "Aug 2010", "Sept 2010", "Oct 2010" }))
        )
</div>

[Iliana Dyankova]

Hello Rick,

In order to avoid such behavior when you print ASP.NET MVC Chart in IE 9, you could set to the chart the CSS page-break-inside property to avoid. For example:

<style>
  #chart
  {
   page-break-inside: avoid
  }
</style>

More detailed information about this property could be find here.

 

All the best,
Iliana Nikolova
the Telerik team

[Rick Glos]

Thank you.  I found that documentation just yesterday and implemented the same property.  In addition to make it work on the clients network I had to add the meta tag for document compatibility.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Read more on that at Defining Document Compatibility.