Merge pull request #2353 from adumesny/master

z-index for modal dialogs

Author: adumesny

doc/CHANGES.md

@@ -92,6 +92,7 @@ Change log
 
 ## 8.2.1-dev (TBD)
 * fix [#2349](https://github.com/gridstack/gridstack.js/issues/2349) grid NoMove vs item NoMove support
+* fix [#2352](https://github.com/gridstack/gridstack.js/issues/2352) .ui-draggable-dragging z-index for modal dialogs
 
 ## 8.2.1 (2023-05-26)
 * fix: make sure `removeNode()` uses internal _id (unique) and not node itself (since we clone those often)

src/gridstack.scss

@@ -103,16 +103,6 @@ $animation_speed: .3s !default;
     }
   }
 
-  &.ui-draggable-dragging,
-  &.ui-resizable-resizing {
-    z-index: 100;
-
-    > .grid-stack-item-content {
-      box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-      opacity: 0.8;
-    }
-  }
-
   &.ui-draggable-dragging {
     will-change: left, top;
     cursor: move;
@@ -123,6 +113,17 @@ $animation_speed: .3s !default;
   }
 }
 
+// not .grid-stack-item specific to also affect dragIn regions
+.ui-draggable-dragging,
+.ui-resizable-resizing {
+  z-index: 10000; // bootstrap modal has a z-index of 1050
+
+  > .grid-stack-item-content {
+    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+    opacity: 0.8;
+  }
+}
+
 .grid-stack-animate,
 .grid-stack-animate .grid-stack-item {
   @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);