From b99308255112673a3ee0481d980675a7c0f8ab81 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 30 Oct 2018 13:03:36 -0400
Subject: [PATCH] Fix custom procedure scroll issue
Fix by disabling overflow scrolling when a modal is open (this prevents the scrolling input issue) and reducing the top margin on custom procedures because it is a taller modal than most
---
src/components/custom-procedures/custom-procedures.css | 1 +
src/components/gui/gui.css | 8 ++++++++
2 files changed, 9 insertions(+)
diff --git a/src/components/custom-procedures/custom-procedures.css b/src/components/custom-procedures/custom-procedures.css
index 1716baab3..54053cdc4 100644
--- a/src/components/custom-procedures/custom-procedures.css
+++ b/src/components/custom-procedures/custom-procedures.css
@@ -3,6 +3,7 @@
.modal-content {
width: 700px;
+ margin: 50px auto; /* This modal is taller than most, reduce top margin */
}
.body {
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 049bf1042..3e4d763c4 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -311,3 +311,11 @@ $fade-out-distance: 15px;
position: absolute;
margin-top: 53px;
}
+
+/*
+ Make the (background) page not scrollable when modals are open
+ This CSS class is automatically added to the body when react-modal is open
+*/
+:global(.ReactModal__Body--open) {
+ overflow: hidden;
+}
--
GitLab