placeholder_text option

README.md

@@ -141,6 +141,7 @@ $(function () {
 - `item_class` - widget class (default: `'grid-stack-item'`)
 - `min_width` - 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`)
 - `placeholder_class` - class for placeholder (default: `'grid-stack-placeholder'`)
+- `placeholder_text` - placeholder default content (default: `''`)
 - `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)
 - `static_grid` - makes grid static (default `false`). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable.  A CSS class `grid-stack-static` is also added to the container.
 - `vertical_margin` - vertical gap size (default: `20`)
@@ -735,6 +736,7 @@ Changes
 - add `static_grid` option.
 - add `min_width`/`min_height` methods (Thanks to @cvillemure)
 - add `destroy` method (Thanks to @zspitzer)
+- add `placeholder_text` option (Thanks to @slauyama)
 
 #### v0.2.3 (2015-06-23)
 

dist/gridstack.css

@@ -16,6 +16,7 @@
   bottom: 0;
   width: auto;
   z-index: 0 !important;
+  text-align: center;
 }
 
 .grid-stack > .grid-stack-item {

dist/gridstack.js

@@ -400,6 +400,7 @@
             height: parseInt(this.container.attr('data-gs-height')) || 0,
             item_class: 'grid-stack-item',
             placeholder_class: 'grid-stack-placeholder',
+            placeholder_text: '',
             handle: '.grid-stack-item-content',
             handle_class: null,
             cell_height: 60,
@@ -470,7 +471,7 @@
 
         this.placeholder = $(
             '<div class="' + this.opts.placeholder_class + ' ' + this.opts.item_class + '">' +
-            '<div class="placeholder-content" /></div>').hide();
+            '<div class="placeholder-content">' + this.opts.placeholder_text + '</div></div>').hide();
 
         this.container.height(
             this.grid.get_grid_height() * (this.opts.cell_height + this.opts.vertical_margin) -

src/gridstack.js

@@ -400,6 +400,7 @@
             height: parseInt(this.container.attr('data-gs-height')) || 0,
             item_class: 'grid-stack-item',
             placeholder_class: 'grid-stack-placeholder',
+            placeholder_text: '',
             handle: '.grid-stack-item-content',
             handle_class: null,
             cell_height: 60,
@@ -470,7 +471,7 @@
 
         this.placeholder = $(
             '<div class="' + this.opts.placeholder_class + ' ' + this.opts.item_class + '">' +
-            '<div class="placeholder-content" /></div>').hide();
+            '<div class="placeholder-content">' + this.opts.placeholder_text + '</div></div>').hide();
 
         this.container.height(
             this.grid.get_grid_height() * (this.opts.cell_height + this.opts.vertical_margin) -

src/gridstack.scss

@@ -26,6 +26,7 @@ $animation_speed: .3s !default;
         bottom: 0;
         width: auto;
         z-index: 0 !important;
+        text-align: center;
     }
 
     > .grid-stack-item {
@@ -53,21 +54,21 @@ $animation_speed: .3s !default;
             -ms-touch-action: none;
             touch-action: none;
         }
-        
+
         &.ui-resizable-disabled > .ui-resizable-handle,
         &.ui-resizable-autohide > .ui-resizable-handle { display: none; }
-        
+
         &.ui-draggable-dragging,
         &.ui-resizable-resizing {
             z-index: 100;
-            
+
             > .grid-stack-item-content,
             > .grid-stack-item-content {
                 box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
                 opacity: 0.8;
             }
         }
-        
+
         > .ui-resizable-se,
         > .ui-resizable-sw {
             text-align: right;
@@ -81,15 +82,15 @@ $animation_speed: .3s !default;
             text-rendering: auto;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
-            
+
             &::before { content: "\f065"; }
         }
-        
+
         > .ui-resizable-se {
             display: inline-block;
             @include vendor(transform, rotate(90deg));
         }
-        
+
         > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
         > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: 0; left: 25px; right: 25px; }
         > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
@@ -98,7 +99,7 @@ $animation_speed: .3s !default;
         > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: 0; right: 25px; }
         > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: 10px; bottom: 0; }
         > .ui-resizable-w  { cursor: w-resize;  width: 10px; left: $horizontal_padding / 2; top: 15px; bottom: 15px; }
-        
+
         @for $i from 1 through $gridstack-columns {
             &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
             &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
@@ -106,8 +107,8 @@ $animation_speed: .3s !default;
             &[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
         }
     }
-    
-    &.grid-stack-animate, 
+
+    &.grid-stack-animate,
     &.grid-stack-animate .grid-stack-item {
         @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
     }
@@ -134,7 +135,7 @@ $animation_speed: .3s !default;
         left: 0 !important;
         top: auto !important;
         margin-bottom: $vertical_padding;
-        
+
         .ui-resizable-handle { display: none; }
     }