HTML/CSS - Print content overflowing to an empty page

Question

I'm trying to print a shipping label (4in x 6in) which appears in a bootstrap modal in my application.

This is my CSS for my print media :

@media print {
body * {
    visibility: hidden;
}
#print-content * {
    visibility: visible;
    height: auto;
    width:auto;
    max-width: 100%;
    max-height: 100%;  
}
.modal{
    position: absolute;
    left: 0;
    top: 0;

}

@page{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;

}
}

And this is my Modal content that has the Shipping Label Image:

<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 " id="print-content">  
       <img class="img-responsive" ng-if="labelLoaded" data-ng-src="data:image/jpeg;base64,{{myImage}}">
       <img ng-hide="labelLoaded" ng-src="">
  </div>

My image appears fine in my Chrome's "Print Preview" - with the exception that it shows 2 pages instead of one; the second page being completely blank.

I've spent an hour trying to figure out what's wrong - but no progress.

I'm using the Japanese Postcard as the paper size since it's the closest to a shipping label.

What am I missing?

jerrylow · Accepted Answer · 2016-08-03T18:19:03.220

1

The issue I'm seeing is that you're setting:

body * {
  visibility: hidden;
}

visibility: hidden;'s difference with properties such as display: none is that visibility just makes the element not visible to the user but it's actually still on the page retaining its dimension and position. My biggest guess is all the content underneath the modal is still present thus on the print version bleeding on to page 2.

One method is to use display: none instead or if you're modals are placed outside of main content area (which I usually do) just hide the main content instead.

<body>
  <main></main>
  <div class="modal"></div>
</body>

CSS:

main {
  display: none;
}

Here's a test with that following strategy: http://jerrylow.com/demo/stackoverflow/38731021.html. The only difference I did was in print target the main only when the modal is opened.

@media print {
  body.modal-open main {
    display: none;
  }
}

Alternate Version

If you really have no control of the dom then here's a version that might work with what you have: http://jerrylow.com/demo/stackoverflow/38731021-3.html. This actually just uses visibility: hidden as you have before but because they still occupy more than one page I would bring font-size down to 0 and restore the font size of the modal. This is a last resort method if you really can't modify the dom. I don't recommend this method if your content behind the modal has other elements such as image occupying space.

@media print {
  body.modal-open * {
    font-size: 0;
    visibility: hidden;
  }

  .modal.in,
  .modal.in * {
    font-size: 1.8rem;
    visibility: visible;
  }
}

edited Aug 03 '16 at 18:19

answered Aug 03 '16 at 00:36

jerrylow

2,569
1
15
25

I think you're right - but once I say display:none - I'm not able to see my modal content either, even though my printable-content div says visibility:visible , should I try changing that too? display: block; didn't seem to do the trick. – 221b Aug 03 '16 at 16:59
Is your modal outside of the main container? I'll update the original example with what I did here: http://jerrylow.com/demo/stackoverflow/38731021.html – jerrylow Aug 03 '16 at 17:41
No. The problem is - I'm using a common template (for header, footer, body etc.) - and adding in other divs/ modals depending on my Angular Controller and Template. So the issue is - I can't display:none the body, it will hide all my templates; I'm trying to work with my divs but it's getting all messed up. – 221b Aug 03 '16 at 17:52
Also - I have an image in my modal - which is what I need to print - nothing else. I do have certain buttons and borders, which is why I have a printable-content id. – 221b Aug 03 '16 at 18:07
Ok from what you're saying I can only think of one last method. Updated the answer with an alternate version. – jerrylow Aug 03 '16 at 18:19
Thanks! I did try this - but it's the same result. From your alternate solution, is there no way we could override the display rule for the particular ID when the modal is open? I mean - display:none the body; except that particular div, by overriding it's style? – 221b Aug 03 '16 at 18:49
The reason you can't is because the parent is already hidden, so there's no way for the child to "show" through its hidden parent. – jerrylow Aug 03 '16 at 20:29

score 1 · Answer 2 · edited May 23 '17 at 11:46

1

"the second page being completely blank"

this could help:

* {
  font-size: 1em !important;
  line-height: 1 !important;
}

seemed not modal issue, but something like described here Remove blank page when printing on google chrome

edited May 23 '17 at 11:46

Community

1
1

answered Mar 20 '17 at 17:14

Mentor-kh

99
1
5

HTML/CSS - Print content overflowing to an empty page

2 Answers2

Alternate Version