diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 40be45177..6dd603859 100644 --- a/doc/CHANGES.md +++ b/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) diff --git a/src/gridstack.scss b/src/gridstack.scss index 27484a75a..7e9fe1517 100644 --- a/src/gridstack.scss +++ b/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);