Merge pull request #512 from radiolips/bugfix/462

Bugfix/462

README.md

@@ -479,6 +479,10 @@ Changes
 
 #### v0.2.7-dev (Development Version)
 
+- add oneColumnModeClass option to grid.
+- remove 768px CSS styles, moved to grid-stack-one-column-mode class.
+- add max-width override on grid-stck-one-column-mode ([#462](https://github.com/troolee/gridstack.js/issues/462)).
+
 #### v0.2.6 (2016-08-17)
 
 - update requirements to the latest versions of jQuery (v3.1.0+) and jquery-ui (v1.12.0+).

dist/gridstack.css

@@ -369,18 +369,19 @@
   transition: left 0s, top 0s, height 0s, width 0s;
 }
 
-@media (max-width: 768px) {
-  .grid-stack-item {
-    position: relative !important;
-    width: auto !important;
-    left: 0 !important;
-    top: auto !important;
-    margin-bottom: 20px;
-  }
-  .grid-stack-item .ui-resizable-handle {
-    display: none;
-  }
-  .grid-stack {
-    height: auto !important;
-  }
+.grid-stack.grid-stack-one-column-mode {
+  height: auto !important;
+}
+
+.grid-stack.grid-stack-one-column-mode > .grid-stack-item {
+  position: relative !important;
+  width: auto !important;
+  left: 0 !important;
+  top: auto !important;
+  margin-bottom: 20px;
+  max-width: none !important;
+}
+
+.grid-stack.grid-stack-one-column-mode > .grid-stack-item > .ui-resizable-handle {
+  display: none;
 }

dist/gridstack.js

@@ -547,7 +547,8 @@
             removable: false,
             removeTimeout: 2000,
             verticalMarginUnit: 'px',
-            cellHeightUnit: 'px'
+            cellHeightUnit: 'px',
+            oneColumnModeClass: opts.oneColumnModeClass || 'grid-stack-one-column-mode'
         });
 
         if (this.opts.rtl === 'auto') {
@@ -635,7 +636,7 @@
                 if (oneColumnMode) {
                     return;
                 }
-
+                self.container.addClass(self.opts.oneColumnModeClass);
                 oneColumnMode = true;
 
                 self.grid._sortNodes();
@@ -659,6 +660,7 @@
                     return;
                 }
 
+                self.container.removeClass(self.opts.oneColumnModeClass);
                 oneColumnMode = false;
 
                 if (self.opts.staticGrid) {

doc/README.md

@@ -76,7 +76,8 @@ gridstack.js API
 - `height` - maximum rows amount. Default is `0` which means no maximum rows
 - `float` - enable floating widgets (default: `false`) See [example](http://troolee.github.io/gridstack.js/demo/float.html)
 - `itemClass` - widget class (default: `'grid-stack-item'`)
-- `minWidth` - minimal width. If window width is less, grid will be shown in one-column mode. You need also update your css file (`@media (max-width: 768px) {...}`) with corresponding value (default: `768`)
+- `minWidth` - minimal width. If window width is less, grid will be shown in one-column mode (default: `768`)
+- `oneColumnModeClass` - class set on grid when in one column mode (default: 'grid-stack-one-column-mode')
 - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
 - `placeholderText` - placeholder default content (default: `''`)
 - `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)

src/gridstack.js

@@ -547,7 +547,8 @@
             removable: false,
             removeTimeout: 2000,
             verticalMarginUnit: 'px',
-            cellHeightUnit: 'px'
+            cellHeightUnit: 'px',
+            oneColumnModeClass: opts.oneColumnModeClass || 'grid-stack-one-column-mode'
         });
 
         if (this.opts.rtl === 'auto') {
@@ -635,7 +636,7 @@
                 if (oneColumnMode) {
                     return;
                 }
-
+                self.container.addClass(self.opts.oneColumnModeClass);
                 oneColumnMode = true;
 
                 self.grid._sortNodes();
@@ -659,6 +660,7 @@
                     return;
                 }
 
+                self.container.removeClass(self.opts.oneColumnModeClass);
                 oneColumnMode = false;
 
                 if (self.opts.staticGrid) {

src/gridstack.scss

@@ -123,18 +123,18 @@ $animation_speed: .3s !default;
     &.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
         @include vendor(transition, left .0s, top .0s, height .0s, width .0s);
     }
-}
-
-@media (max-width: 768px) {
-    .grid-stack-item {
-        position: relative !important;
-        width: auto !important;
-        left: 0 !important;
-        top: auto !important;
-        margin-bottom: $vertical_padding;
-
-        .ui-resizable-handle { display: none; }
-    }
-
-    .grid-stack { height: auto !important; }
+    
+	&.grid-stack-one-column-mode {
+		height: auto !important;
+		&> .grid-stack-item {
+	        position: relative !important;
+	        width: auto !important;
+	        left: 0 !important;
+	        top: auto !important;
+	        margin-bottom: $vertical_padding;
+	        max-width: none !important;
+
+	        &> .ui-resizable-handle { display: none; }
+		}
+	}
 }