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;}

Solution 1

Please try this

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

Solution 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

Comments

[Jordan Running]

@AminurRashid "styles from css class will have no effect." That's not even remotely true. Go to this page and open your browser's Print dialog and tell me if the CSS class has any effect: jsbin.com/lasemol/edit?html,output

[Jordan Running]

@AminurRashid Yep. Still not true.