How to print a angular dialog modal in IE11?

Question

An aspx page is loaded up inside a modal using Kendo Dialog for angular. Intended behaviour for this page is once it is generated it opens the print dialogue. The output of that printing action should be the aspx page. It is so when printed from Chrome/Firefox but IE11 prints only a part of the page behind the actual modal dialogue.

This is achieved in aspx code as follows:

if (!(rsClinicList.EOF))
{
    Response.Write("onLoad=\"doPrint();\"");
}

And method called is simply:

function doPrint() {
    window.print();
}

So this works exactly as expected inside Chrome/Firefox, how to print the correct content using IE11?

Answer 1

I would say it renders some overflow in IE11. Try to laborate with css. A possible solution could be to create a container that you write your content to, which only shows when printing. Like this solution:

Twitter Bootstrap: Print content of modal window

Answer 2

Since you are using Kendo Dialog, please check this article and using the following CSS style to print the Dialog content:

To select only the Dialog content that is visible during printing and hide the rest of the page content, use CSS.

The following example assumes that only one Dialog instance exists on the page. If multiple Dialog instances exist on the page and only one needs to be printed, replace the .k-dialog class by a custom CSS class that is manually applied to the wrapper element of the Dialog.

@media print
{
    body > *
    {
        display: none !important;
    }

    body > .k-dialog
    {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        border-width: 0;
        box-shadow: none !important;
    }

    .k-window .k-window-titlebar
    {
        display: none;
    }
}