3

I'm using a Bootstrap (v4) Modal with multiple sections in the modal. I would like to print the content of the modal-body and start each section on a new page. Naturally I would use the following CSS:

section {
    page-break-after: always; 
}

I've tried many things but I can't seem to get the page-break to work in the modal. I've made a example in codepen to show what I try to achieve. Really would appreciate some help. Thanks in advance!

HTML:

<div class="modal-body do-print">
  <section>
    <h1>Page 1</h1>
    <p>
      content
    </p>
  </section>
  <section>
    <h1>Page 2</h1>
    <p>
      content
    </p>
  </section>
</div>

CSS:

section {
    page-break-after: always !important;
    margin: 40px;
}

https://codepen.io/pen/deqyvq

florisvl
  • 95
  • 1
  • 10

1 Answers1

2

As per "page-break-after" rules, it will not work with absolute positioned elements. Please check below code - 

  #printSection {
    position:absolute; // Remove this and it will work
    left:0;
    top:0;
  }

Thanks,

Ayush Sharma
  • 2,057
  • 15
  • 25