CODEWITHSUNDEEP
htmlcsstwitter-bootstrapprinting
221b
221b

Reputation: 431

HTML/CSS - Print content overflowing to an empty page

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?

Upvotes: 3

Views: 4298

Answers (2)

Mentor-kh
Mentor-kh

Reputation: 109

"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

Upvotes: 1

jerrylow
jerrylow

Reputation: 2629

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

Upvotes: 1

Related Questions