PDF Missing images in Internet Explorer.

[Jeff]

Hi there!

 So I'm using  kendo.drawing.drawDOM() to Export a <div> area on page to a PDF, this works great in my versions of Firefox and Chrome. However in IE 11, its not grabbing the backgrounds of a few divs in the area. This chart area is created problematically, and the "water bottle" columns are being shown based on a height that is calculated by the values...anyway. 

While testing, I determined it was most likely the  background-image that isn't getting pulled correctly. I added a new div with the same class and that one too, failed to be copied into the PDF. I tried swapping out the div with an <img> tag, and while that worked for the pdf export...I lost a bunch of the flexibility of having the image in a div. The image came out streched and generally not what I wanted.

Any ideas for what I can do to make this work in IE?

The html for each column looks something like this:

<div class="WaterBottleColumn" style="background-image: url(../../Content/Images/waterBottlesSmall.png);height: 32px;" title="8,473 water bottle equivalents"></div>

The CSS:

 div.WaterBottleColumn {
    background-repeat: no-repeat;
    background-position: center top;
    margin-left: auto;
    margin-right: auto;
}

 I did have the background-image declared in the CSS class, but I moved it when I was troubleshooting. 

 

Thanks!

[Daniel]

Hello Jeff,

I have answered to your support ticket. I post the same answer here so that it is publicly available for the other customers:

- remove the redundant closing tag for the head element

</head>
</head>

- remove the background-position style from the div.WaterBottleColumn class

div.WaterBottleColumn {

    background-repeat: no-repeat;
    /*background-position: center top;*/
    margin-left: auto;
    margin-right: auto;
}

- add width to the water bottle div element

<div title="8,473 water bottle equivalents" class="WaterBottleColumn" style='width: 96px; height: 32px; background-image: url("waterBottlesSmall.png");'></div>

Let me know if this helped to resolve the problem in IE.

Regards,
Daniel
Telerik

[Jeff]

Awesome! Thanks for helping me out with this! :)