Search code examples
htmlcssmicrosoft-edgewebview2page-break-before

Why is page-break-before:always not working in Edge / Webview2

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>
          Assignment Slips
        </title>
    <style type="text/css">
          @import url('s-89-eng.css');
        </style>
  </head>
  <body>
    <div class="containerPage">
      <div class="containerSlip">
        <img alt="s89" width="323px" height="429px" src="s-89-eng.jpg" />
        <div class="fieldName">xxx</div>
        <div class="fieldAssisant">
        </div>
        <div class="fieldDate">Thursday 6 July 2023</div>
        <div class="fieldCounsel">#5 Accurate Reading</div>
        <div class="checkBibleReading">✓</div>
        <div class="checkMainHall">✓</div>
      </div>
    </div>
    <div class="containerPage" style="page-break-before: always">
      <div class="containerSlip">
        <img alt="s89" width="323px" height="429px" src="s-89-eng.jpg" />
        <div class="fieldName">xxx</div>
        <div class="fieldAssisant">xxx</div>
        <div class="fieldDate">Thursday 6 July 2023</div>
        <div class="fieldCounsel">1st: #1 Effective Introduction</div>
        <div class="checkInitialCall">✓</div>
        <div class="fieldInitialCallIndex">1</div>
        <div class="checkMainHall">✓</div>
      </div>
    </div>
    <div class="containerPage" style="page-break-before: always">
      <div class="containerSlip">
        <img alt="s89" width="323px" height="429px" src="s-89-eng.jpg" />
        <div class="fieldName">xxx</div>
        <div class="fieldAssisant">xxx</div>
        <div class="fieldDate">Thursday 6 July 2023</div>
        <div class="fieldCounsel">2nd: #9 Appropriate Use of Visual Aids</div>
        <div class="checkInitialCall">✓</div>
        <div class="fieldInitialCallIndex">2</div>
        <div class="checkMainHall">✓</div>
      </div>
    </div>
  </body>
</html>

CSS

<style type="text/css">
body {
    font-family: 'Arial Unicode MS';
    font-size: 10pt;
}
.containerPage {
}
.containerSlip{
    float:left;
    position: relative; 
    margin: 3mm;
}
.fieldName {
    position: absolute;
    left: 69px; top: 55px;  width: 232px;
}
.fieldAssisant {
    position: absolute;
    left: 98px; top: 86px;  width: 208px;
}
.fieldInitialCallIndex {
    
    position: absolute;
    left: 55px; top: 215px; width: 100px;
    background-color:yellow;
    font-size: 7pt;
}
.fieldReturnVisitIndex {
    position: absolute;
    left: 55px; top: 244px; width: 100px;
    background-color:yellow;
    font-size: 7pt;
}
.fieldDate {
    position: absolute;
    left: 62px; top: 118px; width: 239px;
}
.fieldCounsel {
    position: absolute;
    left: 15px; top: 145px; width: 295px;
    background-color:yellow;
}
.fieldOther {
    position: absolute;
    left: 245px; top: 215px; width: 53px;
    font-size: 8pt;
}
.checkBibleReading {
    position: absolute;
    left: 35px; top: 182px; width: 15px;
}
.checkInitialCall {
    position: absolute;
    left: 35px; top: 195px; width: 15px;
}
.checkReturnVisit {
    position: absolute;
    left: 35px; top: 225px; width: 15px;
}
.checkBibleStudy {
    position: absolute;
    left: 190px; top: 182px; width: 15px;
}
.checkTalk {
    position: absolute;
    left: 190px; top: 196px; width: 15px;
}
.checkOther {
    position: absolute;
    left: 190px; top: 210px; width: 15px;
}
.checkMainHall {
    position: absolute;
    left: 35px; top: 280px; width: 15px;
}
.checkAuxClass1 {
    position: absolute;
    left: 35px; top: 295px; width: 15px;
}
.checkAuxClass2 {
    position: absolute;
    left: 35px; top: 309px; width: 15px;
}
</style>

Image

enter image description here

Why is it that in Edge / Webview2 that trying to print this to PDF is not respecting the page-break-before?

In my application I let the user specify how many items to have on a page, at which point it inserts the break. Why is this not working and how to resolve?

Solution

  • It's float which messes up page-break-before in print. You can refer to this answer for more information about things which can break page-break-before: https://stackoverflow.com/a/5314590.

    If you only need float:left in web view, you can use different CSS for different medias: print, screen. You can refer to the code below which can fix the issue:

    .containerSlip {
    position: relative;
    margin: 3mm;
 }

@media screen {
    .containerSlip {
        float: left;
     }
}