2

I am trying to insert page-break-after:always; into the Print.css of a dynamic invoice.

The project is using Bootstrap 3, and I have been testing the printing on Chrome. In the invoice HTML I am using the bootstrap grid system, with bootstrap's 'hidden-print/visible-print'.

The issue I am having is: while using Bootstrap, Chrome is not recognising the page-break-after:always. I have read this is due to 'float:left' and many other factors, but after hours/days of tweaking them, it seems to make no difference. Print-break-inside:avoid; works fine.

I am curious if anyone else has encountered this recently, or if anyone with a superior knowledge of Bootstrap's inner-workings knows the root of this issue definitively?

It seems this is a ongoing problem, that Bootstrap knows about, and that may be fixed in Bootstrap 4. Until then I am stuck. I have no idea now how to achieve a print-break-after with dynamic content while using Bootstrap. Removing Bootstrap is not really an option due to the way the CSS is being loaded in my project.

Thanks in advance.

EDIT: Fixed

The only fix I found was to rebuild the layout by hand after setting: 

    float: none !important; 
    position: static !important;

in @media print.

This makes the Bootstrap col-* not work, but now the page breaks do. Pretty brutal fix but at least it worked. The 'row' class of bootstrap still works though, so there's that. Thanks for the help folks.

eliass
  • 21
  • 2
  • 3
  • If you are printing single invoice in single page, then apply the height as "height:100vh" to that invoice page. Suppose you have 10 invoices in your loop, then 10 invoices will print in 10 separate pages. Are you looking for this OR if i'm wrong then apologize... – zed Nov 28 '16 at 13:05
  • I'll look into that right now. The problem is that since the invoices are dynamic (ie. variable in length), it causes multiple invoices to print on the same page at times. What I really need is it to break to a new page after each invoice, no matter the length. – eliass Nov 28 '16 at 13:10
  • If "page-break-after" not working then try the height of printing page, as i stated in previous comment. May be helpful to you. In my case i had use "height:100vh". That worked for me. – zed Nov 28 '16 at 13:17
  • Much appreciated! It does not work for me but thanks. Page-break-inside:avoid is the only thing keeping the printing working at all at this point, and if the invoice length is of a certain size, even that does not help. – eliass Nov 28 '16 at 13:25
  • I found [this answer](http://stackoverflow.com/a/35871701/3585500) that does a `page-break-after` followed by a `page-break-before` to get Chrome to behave. – ourmandave Nov 28 '16 at 18:58
  • Yes. That is close. I am trying something along those lines, but I have to make a non-float centric grid system to replace Bootstraps when the float:left is removed. – eliass Nov 28 '16 at 23:16

0 Answers0