column-N class fix

adumesny · adumesny · commit 8a5adae9ec19 · 2021-01-16T09:24:29.000-08:00
* fix for #1572 * we now automatically add `.grid-stack-N` class when user specify column: N option for CSS to work.
diff --git a/README.md b/README.md
@@ -179,7 +179,7 @@ GridStack.init( {column: N} );
 <div class="grid-stack grid-stack-N">...</div>
 ```
 
-Note: we added `.grid-stack-N` and include `gridstack-extra.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
+Note: class `.grid-stack-N` was added and we include `gridstack-extra.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
 
 See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
 
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -47,11 +47,12 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 ## 3.1.4-dev
 
-- TBD
+- fix [1572](https://github.com/gridstack/gridstack.js/issues/1572) `column: N` option now sets CSS class
+
 ## 3.1.4 (2021-1-11)
 
-- fix [1557](https://github.com/gridstack/gridstack.js/pull/1557) fix no-drop cursor on windows when dragging within a default grid (no external drag in)
-- fix [1541](https://github.com/gridstack/gridstack.js/pull/1541) fix Safari H5 delay when dropping items
+- fix [1557](https://github.com/gridstack/gridstack.js/issues/1557) fix no-drop cursor on windows when dragging within a default grid (no external drag in)
+- fix [1541](https://github.com/gridstack/gridstack.js/issues/1541) fix Safari H5 delay when dropping items
 
 ## 3.1.3 (2021-1-2)
 
diff --git a/spec/e2e/html/1572_one_column.html b/spec/e2e/html/1572_one_column.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>1 column demo</title>
+
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <script src="../../../dist/gridstack-h5.js"></script>
+  <style type="text/css">
+    .grid-stack {
+      width: 200px;
+    }
+  </style>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>1 column demo</h1>
+    <div>
+      <a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
+      <a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#">float: true</a>
+    </div>
+    <br><br>
+    <div class="grid-stack"></div>
+  </div>
+  <script src="../../../demo/events.js"></script>
+  <script type="text/javascript">
+    let count = 0;
+    let items = [{x: 0, y: 0, w: 1, h:1, content: String(count++)}];
+
+    let grid = GridStack.init({column: 1});
+    grid.load(items);
+    addEvents(grid);
+
+    addNewWidget = function() {
+      let n = items[count] || {
+        x: Math.round(12 * Math.random()),
+        y: Math.round(5 * Math.random()),
+        w: Math.round(1 + 3 * Math.random()),
+        h: Math.round(1 + 3 * Math.random()),
+        content: String(count++)
+      };
+      grid.addWidget(n);
+    };
+
+    toggleFloat = function() {
+      grid.float(! grid.getFloat());
+      document.querySelector('#float').innerHTML = 'float: ' + grid.getFloat();
+    };
+  </script>
+</body>
+</html>
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -338,6 +338,9 @@ export class GridStack {
     this.placeholder.appendChild(placeholderChild);
 
     this._updateStyles();
+    if (this.opts.column != 12) {
+      this.el.classList.add('grid-stack-' + this.opts.column);
+    }
 
     this._setupDragIn();
     this._setupRemoveDrop();
