Page breaks in between grid stack items doesn't work

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.

@umesh53

@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.

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.

@radiolips

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

@radiolips

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

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

Hi.. any updates on this?

looking at it now (need it for work)

What it takes to get printing working for grids in general
The core reason page breaks don't work out-of-the-box (and why printing grids usually requires some tweaking) is that GridStack places items using position: absolute with calculated inline top and left coordinates. When elements are absolutely positioned, they are removed from the normal document flow, which causes browsers to completely ignore page-break styles (page-break-before, break-before: page, etc.) and often cut off content awkwardly.

To get printing working generally, we need a @media print style block that unsets the absolute positioning so items can flow naturally in the document (like inline blocks or floats). Using float: left works beautifully for grids because it allows the grid widgets to preserve their calculated width percentages (e.g. --gs-column-width) and wrap cleanly row by row.

(Note: Because floated elements flow based on their DOM order rather than x/y coordinates, you might want to sort your DOM nodes on the beforeprint event to ensure visual layout matches the DOM layout if you have dynamically dragged items around).

Navigation Menu

Repository navigation

Page breaks in between grid stack items doesn't work #701

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Page breaks in between grid stack items doesn't work #701

Description

Activity

radiolips commented on Jul 5, 2017

umesh53 commented on Jul 6, 2017

umesh53 commented on Aug 21, 2017

RollingStone85 commented on Nov 19, 2019

adumesny commented on Feb 17, 2020

HarshJain99 commented on Jun 9, 2024

adumesny commented on Jul 20, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions