CODEWITHSUNDEEP
firefoxprinting
ScottE
ScottE

Reputation: 21630

Firefox printing only 1st page

I'm working on print friendly css for a website. It previews/prints perfectly in IE, but Firefox (version 3.6) only previews/prints the 1st page.

Is anyone aware of anything that would generally cause this? The markup is fairly complicated, so I'm not sure where to start!

Thanks.

Edit

This solution only made things worse.

https://support.mozilla.com/ga-IE/questions/667285#answer-115916

Looks like printing just sucks in FF. Client won't like to hear that - hopefully they don't use FF!

Upvotes: 51

Views: 36049

Answers (16)

Nick Carducci for Carface Bank
Nick Carducci for Carface Bank

Reputation: 531

Browsers seem to add a scrollbar if the outermost root parent element, as exists in ReactJS, is height:min-content or otherwise longer than height:100vh. Then, it will surely (if not be the only way to) print from the browser's dialog. For me, making the root scroll children with overflow wouldn't let me print the position:absolute scrollable child unless printing with a custom button instead of the browser's print dialog.

Upvotes: 0

KuN
KuN

Reputation: 1211

I was having a similar issue using Firefox V77. It will only print the first part of the visible page and will cut off the rest in both preview mode and print mode.

One fix I found is to change flex to block in your print stylesheet.

Also, the V78.0.2 that just relesed in July 2020 seems to have fixed the issue.

Upvotes: 0

Yair Zamir
Yair Zamir

Reputation: 81

What worked for me is add a non-zero top margin to the absolute element container as David Earl writes here https://bugzilla.mozilla.org/show_bug.cgi?id=267029

Like this 

<html>
  <head>
    <style>
@page {
    size: A4 portrait;
    margin: 0;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Verdana", sans-serif;
}
.page {
    position: relative;
    width: 209mm;
    height: 295mm; /* slightly smaller than A4 as there's a bug in Chrome whereby it overflows
                      the physical page otherwise  */
    overflow: hidden;
}
.pagea { background-color: tomato; }
.pageb { background-color: green; }
.content {
  position: absolute;
  top: 100px;
  left: 100px;
  font-size: 36pt;
  color: black;
}
@media print {
    .page {
        page-break-before: always;
        /* uncomment these lines and it works... 
        margin-top: 1px;
        top: -1px;
        */
          /* nudge back up to compensate for margin */
    }
    .page:first-child {
        page-break-before: avoid;
    }
}
    </style>
  </head>
  <body>
    <div class="page pagea">
        <div class="content">Page 1</div>
    </div>
    <div class="page pageb">
        <div class="content">Page 2</div>
    </div>
  </body>
</html>

Upvotes: 0

srghma
srghma

Reputation: 5303

for me (bootstrap 4) solution was 

@media print {
    .row {
      display: block;
    }
}

Upvotes: 5

hhvardan
hhvardan

Reputation: 57

the following works for me.

@media print {
  .field--body table tr {
    display: table-row-group !important;
  }
}

Upvotes: 1

CODE-REaD
CODE-REaD

Reputation: 3028

I tried adding @media print as suggested in this answer as a style definition to the page's <body> element, but Firefox (60.0 (64-bit), Windows 7 64/Pro) still truncated printout of the website to the first page only.

Then I happened to notice a checkbox entitled Simplify Page at the top of Firefox's Print Preview screen: enter image description here

When I checked this box, Firefox removed some of the styling, but the Print Preview screen refreshed to include all of the pages in the website!

I'm not sure how broadly applicable this is so YMMV, but it's worth a try! So far I haven't found a comparable solution for Chrome (Version 65.0.3325.162 (Official Build) (64-bit)).

P.S.: on further experience I see that Simplify Page removes not only styling but also some entire elements such as sample code sections, so be sure to review the results carefully before printing.

Upvotes: 1

Vichu
Vichu

Reputation: 1

I had the same issue and I replaced position from position:relative to position: absolute with height: 100% from the top div to the bottom.

Upvotes: 0

katwhocodes
katwhocodes

Reputation: 2268

I had the same issue because the height of body is set to 100%, after I modified to height: auto in my print.css, it worked.

@media print {
  body {
    height: auto;
  }
}

Upvotes: 5

ithil
ithil

Reputation: 1758

After a lot of research and trial & error, I have found this article by A list apart. I was skeptical because it's so old but it states that:

If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.

As I have a big floated container I thought I'd give it a try. So, I made a mix from other answers and this article and came up with this: 

body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
}

/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak { 
    height: 100%; 
    display: block;
    flex: none;
    float: none;
}
.l-content,
.l-sidebar {
    float: none;
}

So basically:

  1. Setting body to overflow: visible
  2. Setting elements that behave as wrappers to display: block, eliminate all flex styles and reset height if necessary
  3. Eliminate float on long containers

That mix worked for me! I'm so happy I thought I'd share :)

Upvotes: 5

NilsyNils
NilsyNils

Reputation: 451

I tried a dozen fixes for this and, in the end, all I needed was:

@media print {
  body {
    display: block;
  }
}

Upvotes: 9

bananabanana
bananabanana

Reputation: 473

If you don't want to go through all of your code, this is the only thing I've found that works for me without messing up all of my other CSS:

@media print {
  body {
    overflow: visible !important;
  }
}

Upvotes: 17

yakka
yakka

Reputation: 613

I was having the same issue. Turns out, the root tag had display: flex on it. After changing this to display: block, the rest of the content was displayed. I'd recommend going up your DOM tree and checking every display attribute.

Upvotes: 19

sinini
sinini

Reputation: 1433

I just found out, that from an element with 

display:inline-block;

only the first page is printed and everthing else is hidden. setting this to 

display:block;

was the solution in my case.

Upvotes: 27

Mario
Mario

Reputation: 1

Firefox certainly does NOT suck in any respect. However, sometimes it adheres more strictly to standards than other browsers do. Anyways, to cut to the chase, I had the same problem, i.e. firefox was printing (also previewing) only the first 2 pages of a multipage report, built with a long table, produced by a webpage of mine. After some debugging I found out that I had included most of the report's content inside a span element with a style of {display: inline-block;} among other things. As soon as I removed that the pagination was perfect...

Upvotes: 0

Jacob
Jacob

Reputation: 78850

If you are unable to overcome Firefox's limitations on printing, you could convert the page to a PDF. If you're up for that option, Prince XML is a library I'd highly recommend. It has very good CSS support including print media.

Upvotes: 1

Nickolay
Nickolay

Reputation: 32063

The long-standing bug with printing absolutely-positioned elements was fixed in Firefox 3.

The issues with missing pages are tracked in bug 521204 (look through the "depends on" list). Do you have frames or long tables on the page you're trying to print?

And yes, printing in Firefox is under-owned, sorry you have to deal with it...

Upvotes: 5

Related Questions