PDF Missing images in Internet Explorer.

3 posts, 1 answers
  1. Jeff
    Jeff avatar
    10 posts
    Member since:
    Jan 2015

    Posted 14 Jan Link to this post

    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!

  2. Answer
    Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 18 Jan Link to this post

    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
  3. Jeff
    Jeff avatar
    10 posts
    Member since:
    Jan 2015

    Posted 18 Jan in reply to Daniel Link to this post

    Awesome! Thanks for helping me out with this! :) 
Back to Top