CODEWITHSUNDEEP
javascripthtmlgoogle-chromeprintingmozilla
Neetal Kini
Neetal Kini

Reputation: 45

Mozilla Firefox printing Modal data along with the div that is to be printed

```
<div class="maindiv></div>
<div class="printablediv"></div>


function printData()
{
    $('#ProductIdModal').modal('hide');
    $(".maindiv").css('display','none');
    $(".Printablediv").css('display','block');
    $('.modal-backdrop').remove();
    window.print();
}


window.addEventListener("afterprint", myFunction);
function myFunction() {
    $(".maindiv").css('display','block');
  $(".Printablediv").css('display','none');
}

```

I have a written a function to print a div on Ajax success named printData(). Ajax call is made from a button which is on the modal named ProductModal

The print preview I get in chrome is fine but the modal gets displayed in mozilla firefox below the div.

Print Preview in chrome : enter image description here

Print Preview in mozilla : enter image description here

Upvotes: 2

Views: 337

Answers (1)

wazz
wazz

Reputation: 5068

Try using a print media query. For your case, I'm not sure if you need to apply the styles to the page or the modal.

These CSS styles are automatically applied only when printing, even through the browser. You can change the style or hide things.

/* print styles. put these at the end of your css. */
@media print {
    /* some of yours, copied from the js function: */
    .modal                      { display: none; }
    .maindiv                    { display: none; }
    .Printablediv               { display: block; }

    /* other. */
    *                           { color:#333; }
    html                        { height:auto; }
    .otherThing                 { font-size: 20pt; }
}

Hope that works.

Upvotes: 1

Related Questions