9

Print Preview of latest version of Firefox(in windows) shows something like this:

Print Preview in Firefox

There should be two pages but it only show first page. Logo of 2nd page is cut off as you can see. What might be causes of this?

3
  • What would be the expected behaviour?
    – m13r
    Apr 19, 2017 at 10:15
  • 1
    two pages with logo in each.
    – Paliza
    Apr 19, 2017 at 11:31
  • Please share more details, like the code you are using
    – Nico Haase
    Oct 22, 2020 at 10:00

4 Answers 4

20

Firefox previous versions had problem to print with long tables and iframes including absolute positioned elements.

If you don't see those elements,I suggest you to inspect such element with display:table or display:flex and without hesitation change it to display:block only for @media print

Another headache might be coming from overflow property. Find such element with overflow:scroll or overflow:hidden and of course write overflow:visible for @media print.

Thats all from me.

3
  • 3
    i spend almost two days on this, finally changing display to block worked. I can't explain how happy i'm now. Thank you so much. thank you stack overflow team.
    – Paliza
    Apr 19, 2017 at 13:04
  • 2
    I had to remove both display:flex and display:-webkit-box.
    – Pino
    Jun 13, 2017 at 13:41
  • 1
    Flexbox was causing issues with Firefox Dev for me too! Thanks!
    – Renrhaf
    Apr 17, 2018 at 22:10
1

I had the same problem with Firefox printing only the first page.

In my case it turned out that

float: right;

was the problem. Firefox printed blank second page when float was set.

To fix it i had to use this code in CSS (eg. ):

@media print {
  div.example {
      float:none;
  }
}
1
  • Had same problem using boostrap3 with a table inside a <div class="col-...">. Thanks for the float:none; tip!
    – antman3351
    Aug 28, 2020 at 10:16
0

Here I configured the CSS files to become loaded only on the screen and the problem was solved.

<link href="../css/sb-admin-2.min.css" rel="stylesheet" media="screen">
0

I had same problem, the thing is bootstrap was adding break-inside: avoid to <tr>.
So I added table { tr { break-inside: auto } which fixed issue on my part. enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.