fix(modal): scrolling multple modals positioning

When multiple modals are used and one of them got the scrolling class, the other non scrolling modals are position shifted right before they get hidden/overlayed
fomantic · Mar 3, 2023 · 81f7c2c · 81f7c2c
1 parent cb680cb
commit 81f7c2c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
@@ -437,19 +437,22 @@
         overflow: hidden;
     }
     .scrolling.dimmable > .dimmer {
-        justify-content: flex-start;
+        justify-content: center;
         position: fixed;
     }
     .scrolling.dimmable:not(body) > .dimmer {
-        justify-content: center;
         position: absolute;
     }
     .scrolling.dimmable.dimmed > .dimmer {
         overflow: auto;
         overscroll-behavior: @overscrollBehavior;
     }
+    .modals.dimmer .ui.scrolling.modal.fullscreen {
+        top: 0;
+    }
     .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
         margin: @scrollingMargin auto;
+        top: @scrollingTop;
     }
 
     /* Fix for Firefox, Edge, IE11 */

diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables
@@ -133,6 +133,7 @@
 /* Scrolling Margin */
 @scrollingMargin: 2rem;
 @mobileScrollingMargin: @mobileTopAlignedMargin;
+@scrollingTop: 1em;
 
 /* Scrolling Content */
 @scrollingContentMaxHeight: calc(80vh - 10rem);