Page breaks in between grid stack items doesn't work

[umesh53]

Suppose if I want to break the page after a gird item and render the rest of the grid items in other page while printing, adding CSS in between the grid items or on the grid item doesn't work.

[radiolips]

@umesh53 Do you have an example of this I can look at? I haven't tested printing grid items but it's on my list, and if you've got an example I can work off of, that'd be very helpful.

[umesh53]

Yeah I do.

<style>
  @media print {
    .page-break {
      display: block;
      page-break-after: always;
    }
  }
</style>

<div class="grid-stack">
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="12" data-gs-height="2">
    <div class="grid-stack-item-content" style="background-color: red;">GRID1</div>
  </div>
  <div class="page-break"></div>
  <div class="grid-stack-item" data-gs-x="4" data-gs-y="3" data-gs-width="12" data-gs-height="4">
    <div class="grid-stack-item-content" style="background-color: yellow;">GRID2</div>
  </div>
</div>

<script type="text/javascript">
  $(function () {
    $('.grid-stack').gridstack();
  });
</script>

In the above example, in between 2 grid stack items, I have written one DIV element and attached some CSS while printing the HTML.

And if the same DIV element is placed out of grid stack main element, it works perfectly.

And I'm using Phantom-JS version 2.1.1 of Windows to generate the PDF.

[umesh53]

Hi @radiolips, Is there any update on the above issue? I think that data-gs-height is not allowing to page break.

[RollingStone85]

Hi @radiolips, is there a fix for this yet?

[adumesny]

Note to self: here is a local test case: test.zip