Print modal content as full A4 page

Question

I am trying two things :

1. Show content on a modal as how it would appear on an A4 page
2. windows.print() the modal on an A4 page through major browsers

Following is my CSS:

.page {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px black solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body {
        margin:0 !important;
        padding:0 !important;
        height:100% !important;
        visibility: hidden;
    }
        
    .page .subpage .col-md-12,.col-lg-12{
        float:left;
        width:100%;
    }
    .page .subpage {
        padding: 1cm;
        border: 5px black solid;
        height: 257mm;
        outline: 2cm #FFEAEA solid;
        position:absolute;
    }
    .page {
        visibility: visible;
    }
}

Here's how the modal looks:

But this is how it looks on calling window.print() on button click:

What am I doing wrong here? Relative CSS newbie, have looked at a bunch of SO questions and other resources, but can't seem to figure this out.

UPDATE: I used z-index:9999 and width:140% to get the modal content(i.e. class="page") to cover the A4 page width. Don't think its the best solution, also can't get height to stretch the entire 297mm; height still as much as shown in second image. The 140% looks fine on a pdf saved through Chrome, is cutoff (understandably) in firefox and shows up as blank pdf in IE. Updated CSS: @media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;}

Answer 1

Please try this

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

Answer 2

I'd write a comment but I can't, so answer box it is. tl;dr, you need to provide more code or reproduce this issue in a place where we can see it.

I put your code into plain page with just a div with class page and nested a div with class subpage and there are some padding issues and the print view looks nothing like the web view.

Your min-height: 297mm; wasn't necessary and was adding extra space as it doesn't align with your height setting for .subpage.

Your position:absolute; squished your .subpage in print view.

But with those two tweaks, your css, with just simple divs in html, works about fine. I suspect something else on your page has conflicting dimensions, but again, without a reproduction on fiddle or something, we can't see it.

PS: I saw this other post from some time ago and there's a DEMO in there. It looks promising: CSS to set A4 paper size

Answer 3

I have updated an jsfiddle example to fit your needs

Here is css code

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: yellow;
  }
}

Here is html:

<div>
  <button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>

<hr />
<div id="printSection">
  <div id="printThis">
    This should BE printed!
  </div>

  <div id="printThisToo">
    This should BE printed, too!
  </div>

</div>

and a javascript code to call print:

document.getElementById("btnPrint").onclick = function() {
  window.print();
}

http://jsfiddle.net/95ezN/1459/