diff --git a/demo/print.html b/demo/print.html
index 675d2ef93..1743a85c8 100644
--- a/demo/print.html
+++ b/demo/print.html
@@ -41,11 +41,11 @@
Second Grid (Default Print Behavior, 6 column)
};
let items = [
- {x: 6, y: 0, w: 4, h: 1, content: 'Item 2
(Page 1)'},
+ {x: 6, y: 1, w: 4, h: 1, content: 'Item 2
(Page 1)'}, // test floating (due to hidden:true support to reclaim space, will move upwards)
{x: 1, y: 0, w: 4, h: 2, content: 'Item 1
(Page 1)'}, // verify domSort is working
{x: 0, y: 2, w: 12, h: 1, content: 'Item 3
(Starts on Page 2)', print: { pageBreak: true } },
- {x: 0, y: 3, w: 6, h: 1, content: 'Item 4
(Not Printed)', print: { hide: true } },
- {x: 6, y: 3, w: 6, h: 1, content: 'Item 5'},
+ {x: 0, y: 3, w: 12, h: 1, content: 'Item 4
(Not Printed)', print: { hide: true } },
+ {x: 6, y: 3, w: 6, h: 1, content: 'Item 5'}, // should reflow upwards
{x: 0, y: 4, w: 12, h: 2, content: 'Item 6
(Starts on Landscape Page)', print: { pageBreak: true, orientation: 'landscape' } },
{x: 0, y: 6, w: 6, h: 1, content: 'Item 7'},
{x: 0, y: 6, w: 12, h: 2, content: 'Item 8
(Starts on Portrait Page)', print: { pageBreak: true, orientation: 'portrait' } },
diff --git a/src/gridstack.scss b/src/gridstack.scss
index 220466f8d..b987ce294 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -174,10 +174,12 @@
left: auto !important;
top: auto !important;
- /* Apply GS coordinates natively via the injected CSS vars */
+ /* Apply GS coordinates natively via the injected CSS vars.
+ We deliberately DO NOT set grid-row-start so that the browser's
+ CSS Grid engine can natively auto-flow elements upwards, naturally
+ collapsing any empty rows caused by hidden elements! */
grid-column-start: calc(var(--gs-x) + 1) !important;
grid-column-end: span var(--gs-w) !important;
- grid-row-start: calc(var(--gs-y) + 1) !important;
grid-row-end: span var(--gs-h) !important;
}
.grid-stack > .grid-stack-item[gs-page-break="true"] {
@@ -198,4 +200,9 @@
/* vmin ensures we get the short edge of the paper */
min-width: calc(100vmin * var(--gs-w) / var(--gs-columns, 12)) !important;
}
+
+ /* Hide interactive elements during print */
+ .grid-stack > .grid-stack-item > .ui-resizable-handle {
+ display: none !important;
+ }
}