Merge branch 'fix/#5228/pbehavior-menu-position' into 'develop'

[Issue #5228] Attach menu to modals wrapper See merge request canopsis/canopsis-pro!3343
capensis · Dec 14, 2023 · 5a2f3d1 · 5a2f3d1
2 parents f8b3245 + 567df51
commit 5a2f3d1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/community/sources/webcore/src/canopsis-next/src/bootstrap/plugins.js b/community/sources/webcore/src/canopsis-next/src/bootstrap/plugins.js
@@ -64,26 +64,30 @@ export const bootstrapApplicationPlugins = (Vue) => {
             offsetX: true,
             maxWidth: 500,
             openOnHover: true,
+            attach: '.modals-wrapper',
           },
         },
         dsCalendarEvent: {
           popoverProps: {
             offsetY: true,
             openOnHover: true,
             transition: 'fade-transition',
+            attach: '.modals-wrapper',
           },
         },
         dsCalendarEventPlaceholder: {
           popoverProps: {
             offsetY: true,
             openOnHover: true,
             transition: 'fade-transition',
+            attach: '.modals-wrapper',
           },
         },
         dsCalendarEventTimePlaceholder: {
           popoverProps: {
             openOnHover: true,
             transition: 'fade-transition',
+            attach: '.modals-wrapper',
           },
         },
       },

diff --git a/community/sources/webcore/src/canopsis-next/src/plugins/modals/components/the-modals.vue b/community/sources/webcore/src/canopsis-next/src/plugins/modals/components/the-modals.vue
@@ -49,30 +49,36 @@ $minimizedDialogMaxWidth: 360px;
     align-content: flex-start;
     z-index: 300;
 
-    & ::v-deep .v-dialog__content {
-      &--minimized {
-        margin: 8px 8px 0 8px;
-        position: relative;
-        height: auto;
-        max-width: $minimizedDialogMaxWidth;
-        pointer-events: all;
-        z-index: inherit !important;
+    & ::v-deep {
+      .v-menu__content {
+        pointer-events: auto;
+      }
 
-        .v-dialog {
-          margin: 0;
-          box-shadow: none;
-          transition: none;
+      .v-dialog__content {
+        &--minimized {
+          margin: 8px 8px 0 8px;
+          position: relative;
+          height: auto;
+          max-width: $minimizedDialogMaxWidth;
+          pointer-events: all;
+          z-index: inherit !important;
 
-          .v-card {
-            &.fill-min-height {
-              min-height: auto;
-            }
+          .v-dialog {
+            margin: 0;
+            box-shadow: none;
+            transition: none;
+
+            .v-card {
+              &.fill-min-height {
+                min-height: auto;
+              }
 
-            &__title {
-              padding: 0 10px;
+              &__title {
+                padding: 0 10px;
 
-              .headline {
-                font-size: 16px !important;
+                .headline {
+                  font-size: 16px !important;
+                }
               }
             }
           }