Background Content Prints when Printing Modal Contents in IE

Question

I am trying to print the contents of a Bootstrap Modal. This works well in Chrome, but in IE, when the modal prints the entire page contents overlap. I have tried a few solutions found Here, but I can't get any of them to work for me.

Here is my HTML for my modal:

 <div ng-cloak>
    <div id="stack4" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
        <div class="modal-dialog modal-responsive">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><span ng-bind="title"></span></h4>
                </div>
                <div class="modal-body">
                    @Html.Partial("_PrintSSQ")
                </div>
                <div class="modal-footer">
                    <span class="pull-left"><button type="button" class="btn btn-primary" data-dismiss="modal">Close</button></span><span class="pull-right"><button type="button" class="btn btn-primary" ng-click="savePdf()">Prepare Print View</button></span>
                </div>
            </div>

        </div>
    </div>
</div>

Depending on the user's selection via checkbox it inserts which partial view to print using the following:

    <div id="saveToPdf">
        <div ng-repeat="ps in print.sections" >
            <div ng-if="ps.QuestionSectionID == 1">
                <div><h4>{{ps.vchSectionName}}</h4></div>
                @Html.Partial("_PrintCompanyProfile")

                <br />
            </div>
            <div ng-if="ps.QuestionSectionID == 2">
                <div><h4>{{ps.vchSectionName}}</h4></div>
                @Html.Partial("_PrintCompanyServices")

                <br />
            </div>
            <div ng-if="ps.QuestionSectionID == 3">
                <div><h4>{{ps.vchSectionName}}</h4></div>
                @Html.Partial("_PrintInformationRelease")

                <br />
            </div>

        </div>

    </div>

Here is my CSS:

   @media print {
  body {
    visibility:hidden;
  }
  #printSection, #printSection {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

Here is my Angular Controller js:

$scope.savePdf = function () {
    printElement(document.getElementById('saveToPdf'));
    window.print();

};
function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof (delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof (delimiter) === "object") {
            $printSection.appendChlid(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}

The modal displays like this:

but it prints like this:

This is critical as most of our users use IE. Any assistance is greatly appreciated!!!!

Browsers usually don’t print background colors/images in default settings; the user has to specifically request backgrounds to be printed. Your print result looks like exactly that - content below the modal is “showing through,” because the background of the modal is not printed. You could try and position an actual image behind the modal; but a print stylesheet that makes everything else outside the modal “disappear” might be the better option. — CBroe, Aug 23 '16 at 14:21

score 0 · Accepted Answer · answered Aug 23 '16 at 16:22

0

I was able to get this to work by adding:

    <style type="text/css" media="print">
    .lb1 {
        display: none;
    }
</style>

Then putting everything that I didn't want to show in a div using the lb1 class.

answered Aug 23 '16 at 16:22

Rani Radcliff

4,856
5
33
60

Background Content Prints when Printing Modal Contents in IE

1 Answers1