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.

Andrus
  • 26,339
  • 60
  • 204
  • 378
  • you should not be using absolute positioning if you want one element to push another element down. – tester Jan 01 '14 at 18:19
  • 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 ? – Andrus Jan 01 '14 at 18:45
  • page breaks work if you change `absolute` to `relative` or `static`. whether or not this looks correct is up to you to tweak. – tester Jan 01 '14 at 18:47
  • 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 ? – Andrus Jan 01 '14 at 20:05
  • @tester Maybe it is possible to put absolute elements inside relative div as described in http://css-tricks.com/absolute-positioning-inside-relative-positioning/ – Andrus Jan 01 '14 at 20:26

1 Answers1

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.

Chris Happy
  • 7,088
  • 2
  • 22
  • 49