CSS Property page-break-before not working correctly

2,858 views
Skip to first unread message

JT Anderson

unread,
Aug 28, 2015, 12:09:35 PM8/28/15
to Chromium-discuss
My company uses android tablets in our Warehouse to direct the workers what items to pull and put into which shipment boxes. Once they've completed a run, they print all of the invoices for their orders from a generated HTML page that is separated by divs with the property page-break-before set. This works for almost all jobs. However, if there are a large number of items on an invoice, it can take more than one page. When that happens, the print preview, and the hard copies that are printed should be

Page 1: invoice 1
Page 2: invoice 2
Page 3: invoice 3 part 1
Page 4: invoice 3 part 2
Page 5: invoice 4
Page 6: invoice 5

instead we are getting:

Page 1: invoice 1
Page 2: invoice 2, top of invoice 3
Page 3: invoice 3 part 2
Page 4: invoice 3 part 3, invoice 4
Page 5: invoice 5

In this text-only example, Invoice 3 ignores the page-break-before style, and spreads itself over three pages, some on invoice 2's page, the bulk on it's own page, then the remainder on the next page before the next invoice. We print through an app called "Let's Print Droid", but I have also tested this using Google Cloud print, and the result is the same.

I also get the same problem when printing from the chrome browser on Windows 7 and Linux. The included HTML document will demonstrate the issue that I am seeing when printed.

W3 Schools says that this has been supported since Chrome V1: http://www.w3schools.com/cssref/pr_print_pagebb.asp

Please let me know if there is any information that I can get for you to assist in troubleshooting this problem.

Our tablets are Samsung Galaxy Tab 10.1's (SM-T530NU), running Android 5.0.2.

Thank you,
JT Anderson
printdemo.html

PhistucK

unread,
Aug 29, 2015, 4:19:56 AM8/29/15
to zer...@gmail.com, Chromium-discuss
MDN mentions the element must be a display: block; element -

In your attached demo, you marked it as a display: inline-table; element.
Changing it to display: block; seems to organize the element like you intended.

Does your attached demo print as intended in Firefox?


PhistucK

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.

Reply all
Reply to author
Forward
0 new messages