Question 225053 in Html Question posted in
Some basic documentation can be found here.

Html – Firefox ignores break-after: page when printing hidden div

In our Vue.js application, we are looping over multiple lists and creating tables to print from each list. We set class "pagebreak" on an empty after the table content.

CSS:

.pagebreak {
/*page-break-after: always;*/
break-after: page;
}

I have tried clear:float and other possible solutions I found on stackoverflow but they do not work, like setting the class on the div itself and not an empty element

The page breaks work in Edge and Chrome

This is a JSFiddle for reference stripped down to only html/css of three tables:

This still does not work in my FF (version in image)

enter image description here

Tags:

2

Answers


  1. 0

    This property on .print-only{} is problematic : display: table;

    I guess it works how you want if you use : break-after: column; maybe because each .pagebreak is considered as a column of a table.

    If you take off display: table;, break-after: page; seems to work correctly/

    Login or Signup to reply.
  2. 0

    I think this property is not supported by Firefox. When check official MDN Doc for page-after-break and open this page in both browser but it is not working in Firefox. If official page can’t break page then May be not support by Firefox.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search