Fix: disable vertical scroll instead of hide on desktop browsers

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 4f753e04120a34da126cc52ce0d13e0a424fc9dc..5ca3b447a36f330d2a66f40c918f28d62c3530dc 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -57,6 +57,10 @@ body {
   color: pvar(--mainForegroundColor);
   background-color: pvar(--mainBackgroundColor);
   font-size: 14px;
+  // On desktop browsers, make sure vertical scroll bar is always visible
+  // Allow to disable the scrollbar instead of hide it when the content fit the body
+  // And not move the content and header horizontally sticked to right when the content is updating
+  overflow-y: scroll;
 }
 
 ::selection {

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 0dc58a7c9235173de3f6ab4826cbf40fbabb2689..dd5824b7a77915e2654c36b12de16e7ab757b78b 100644 (file)
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -143,6 +143,14 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
 }
 
+
+// On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
+.modal-open {
+  overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
+  position: fixed; // Fix the body position to disable any scroll content
+  width: 100vw; // Make sure the content fits all the available width when position: fixed
+}
+
 // Nav customizations
 .nav .nav-link {
   display: flex !important;