From 5b1cd50be2a46f5801c0bf37afcbab9d57e0b8b8 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Fri, 26 Feb 2021 14:56:24 -0800
Subject: [PATCH] column # changes auto cellHeight

* fix changing column # `column(n)` now resizes `cellHeight:'auto'` to keep square
* update column.html demo to have fix cellHeight (makes it easier to see relayout for debugging)
---
 demo/column.html | 8 ++++++--
 doc/CHANGES.md   | 1 +
 src/gridstack.ts | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/demo/column.html b/demo/column.html
index 5f55ee6d7..84a5d8ecb 100644
--- a/demo/column.html
+++ b/demo/column.html
@@ -12,7 +12,7 @@
 </head>
 <body>
   <div class="container-fluid">
-    <h1>column() grid demo</h1>
+    <h1>column() grid demo (fix cellHeight)</h1>
     <div><span>Number of Columns:</span> <span id="column-text">12</span></div>
     <div>
       <label>Choose re-layout:</label>
@@ -41,7 +41,11 @@ <h1>column() grid demo</h1>
   </div>
 
   <script type="text/javascript">
-    let grid = GridStack.init({float: true});
+    let grid = GridStack.init({
+      float: true,
+      disableOneColumnMode: true, // prevent auto column for this manual demo
+      cellHeight: 100 // fixed as default 'auto' (square) makes it hard to test 1-3 column in actual large windows tests
+    });
     let text = document.querySelector('#column-text');
     let layout = 'moveScale';
 
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index b307576f0..ebeca32fd 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -54,6 +54,7 @@ Change log
 - Dragging up and down now behave the same (used to require push WAY down past to swap/append). Also much more efficient collision code.
 - handle mid point of dragged over items (>50%) rather than a new row/column and check for the most covered when multiple items collide.
 - fix [1617](https://github.com/gridstack/gridstack.js/issues/1617) FireFox DOM order issue. Thanks [@marcel-necker](https://github.com/marcel-necker)
+- fix changing column # `column(n)` now resizes `cellHeight:'auto'` to keep square
 - add `drag | resize` events while dragging [1616](https://github.com/gridstack/gridstack.js/pull/1616). Thanks [@MrCorba](https://github.com/MrCorba)
 - add `GridStack.setupDragIn()` so user can update external draggable after the grid has been created [1637](https://github.com/gridstack/gridstack.js/issues/1637)
 
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 221cdba1a..6dd796c3f 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -298,7 +298,7 @@ export class GridStack {
 
     this._isAutoCellHeight = (this.opts.cellHeight === 'auto');
     if (this._isAutoCellHeight || this.opts.cellHeight === 'initial') {
-      // make the cell content square initially (will use resize event to keep it square)
+      // make the cell content square initially (will use resize/column event to keep it square)
       this.cellHeight(undefined, false);
     } else {
       this.cellHeight(this.opts.cellHeight, false);
@@ -685,6 +685,7 @@ export class GridStack {
       if (!domNodes.length) { domNodes = undefined; }
     }
     this.engine.updateNodeWidths(oldColumn, column, domNodes, layout);
+    if (this._isAutoCellHeight) this.cellHeight();
 
     // and trigger our event last...
     this._ignoreLayoutsNodeChange = true; // skip layout update
