I am trying two things :
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: Set width for . modal-dialog element Similarly, you can override the width property of . modal-sm , . modal-lg and . modal-xl class to resize the small, large and extra-large modal dialog box respectively.
You can specify the dimensions, orientation, margins, etc., of a page box within an @page rule. The dimensions of the page box are set with the 'size' property. The dimensions of the page area are the dimensions of the page box minus the margin area.
Please try this
@media print{
body * {
visibility: hidden;
}
#page, #page * {
visibility: visible;
}
#page {
position: absolute;
top: 0;
left: 0;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With