title: Print modal content as full A4 page
body: <p>I am trying two things :</p>
  <ol>
  <li>Show content on a modal as how it would appear on an A4 page</li>
  <li>windows.print() the modal on an A4 page through major browsers</li>
  </ol>
  <p>Following is my CSS:</p>
  <pre><code>.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;
      }
  }
  </code></pre>
  <p>Here's how the modal looks:
  <a href="https://i.stack.imgur.com/ZR3RP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZR3RP.png" alt="enter image description here" /></a></p>
  <p>But this is how it looks on calling <code>window.print()</code> on button click:
  <a href="https://i.stack.imgur.com/XQ4ul.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XQ4ul.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>UPDATE: I used z-index:9999 and width:140% to get the modal content(i.e. class=&quot;page&quot;) 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:
  <code>@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;}</code></p>