Fixed #1165 - Dialog is not displayed correctly in mobile view

primefaces · Jan 23, 2020 · 11a1c5a · 11a1c5a
1 parent 13b2153
commit 11a1c5a
Showing 1 changed file with 7 additions and 11 deletions.
diff --git a/src/components/dialog/Dialog.css b/src/components/dialog/Dialog.css
@@ -17,12 +17,11 @@
     pointer-events: auto;
 }
 .p-dialog {
-    position: fixed;
     padding: 0;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
     pointer-events: auto;
+    max-height: 90%;
+    margin: 5% auto;
+    overflow-y: auto;
 }
 .p-dialog .p-dialog-titlebar {
 	padding: .5em .75em;
@@ -119,20 +118,17 @@
 /* Animation */
 .p-dialog-enter {
     opacity: 0;
-    transform: translateX(-50%) translateY(-50%) scale(0.7);
+    transform: scale(0.7);
 }
 
 .p-dialog-enter-active {
     opacity: 1;
-    transform: translateX(-50%) translateY(-50%) scale(1);
+    transform: scale(1);
     transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 .p-dialog-enter-done {
-    position: static;
     transform: none;
-    top: auto;
-    left: auto;
 }
 
 .p-dialog-exit {
@@ -150,8 +146,8 @@
     transition: none;
     transform: none;
     width: 100vw !important;
-    top: 0;
-    left: 0;
+    max-height: 100%;
+    margin: auto;
 }
 
 .p-dialog-maximized .p-dialog-content {