Login/Register
how to force page break between absolutely positioned elements in css
Asked Answered
Solved htmlcsspaginationcss-positionabsolute
E

1

10

html printing form is designed using absolutely positioned elements. How to force page break between some lines.

I tried code below but page1 and page2 appers in first page and empty pages are at end if printed from browser. How to force page1 and page2 to appear in separate pages ?

<!DOCTYPE html>
<html>
<head>

<style>
  div {
    position: absolute;
  }

    @page {
      visibility: hidden;
      margin: 0 15px;
      height: auto;
    }

    .break {
      page-break-before: always;
    }
</style>
</head>

<body>
  <div class='break'></div>
<div style='top:11.58cm;'>page1</div>
  <div class='break'></div>
<div style='top:13.35cm;'>page2</div>
</body>
</html>

I also tried to change second page contents to

<div  class='break' style='top:1cm;'>page2</div>

But both lines are still printed in first page.

Expeditionary answered 1/1, 2014 at 18:0 Comment(5)
you should not be using absolute positioning if you want one element to push another element down. – Selfcentered
report contains multiple documents whose layout is created using absolute positioning. Layout is designed in visual form designer by positioning elements using mouse. Every document should be printed starting at new page. How to implement this ? – Expeditionary
page breaks work if you change absolute to relative or static. whether or not this looks correct is up to you to tweak. – Selfcentered
reports are designed for absolute layout by end users. I dont know them at runtime, not possible to change. Maybe it is possible to create css grid or html table element of approx 50 columns, puts divs into this grid columns or use canvas elemet or some other solution ? – Expeditionary
@Selfcentered Maybe it is possible to put absolute elements inside relative div as described in css-tricks.com/absolute-positioning-inside-relative-positioning – Expeditionary
H
6

A little late to the game, but this might be useful for future reference:

.break {
  page-break-after: always;
  position: relative;
}

.absolute {
  position: absolute;
}
<div class='break'>
  <div class="absolute" style='top:11.58cm;'>page1</div>
</div>
<div class='break'>
  <div class="absolute" style='top:13.35cm;'>page2</div>
</div>

Working JSfiddle

To test, select the text in the result and print.

Heated answered 16/12, 2016 at 1:53 Comment(1)
I found I had to give the div.break a (hidden) border to get this to work. – Brigidabrigit

© 2022 - 2024 — McMap. All rights reserved.