Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox adding page breaks before large div block when printing

I have a bit of logic in one of my Rails views that states if the table I'm about to print is over 7 rows, create a div around the table with a min-height style to make sure the footer below this table goes to the end of the page 2, rather than page 1.

I've tested this logic in many browsers including: Chrome, Safari and IE (!) and they all work as expected. Firefox, however, is adding a pesky page-break right before the div and table. I have tried avoiding this page-break by adding this CSS style in the div and also in the table: page-break-before: avoid; as well as this newer Firefox style: break-before: avoid;, but it doesn't seem to affect this page-break during printing. Any other ideas? Does Firefox automagically add a page-break before large divs when printing?

<div style='min-height: 1150px;'>
    <table>
     blah blah table stuff...
    </table>
</div>
like image 870
user2203451 Avatar asked Jul 07 '13 18:07

user2203451


People also ask

How do I prevent a page-break in a div?

Syntax: page-break-inside: auto; avoid: It avoids a page break inside the element.

How do I specify page breaks in HTML for print?

You can use the CSS property page-break-before (or page-break-after ). Just set page-break-before: always on those block-level elements (e.g., heading, div , p , or table elements) that should start on a new line.

How do I create a dynamic page-break in HTML?

page-break-before: auto instead of . page-break-before: always. The "auto" will break the page only if the contents are at the end if the page, this will prevent breaking the page and leaving a lot of blank space.

What is page-break Before always?

always − A page break should be forced before this element's box. avoid − No page break should be placed before the element's box if at all possible. left − Force one or two page breaks before the element's box, such that the next page on which an element is printed will be a left-hand page.


1 Answers

Well, Because we don't have live example of your code Unfortunately is very hard to finger out the solution but the good news is I can provide some information about it might works but not sure.

  1. Always insert a page break before each element (when printing).
  2. You can't use this property for (an empty div) or with (position:absolute;).
  3. Before using page-break-before, check if you can use break-before instead.
  4. Avoid page break before the element (if possible) so is not guaranteed to work, That is why we ask you to provide some live example to work with it.
  5. Try to use page-break-before: inherit; in the second page to till the second page you are part of the first part of the page.(so if you have one table tray to know where is the last part of the first page and add either page-break-before: avoid; , break-before: avoid; , break-before: inherit; or page-break-before: inherit;).
  6. If not try to use either (column-break-before: avoid; or -moz-column-break-before: avoid;) before the beginning of the second page or (column-break-inside: avoid; or -moz-column-break-inside: avoid;).
  7. If not try to use page-break-inside or break-inside it might the brake is inside not outside.

I hope this will help you to fix your problem and let me know which the most it works for you. Also let me know if you have any question.

like image 124
Mohammed Moustafa Avatar answered Sep 20 '22 14:09

Mohammed Moustafa