ProblemTabEditor : no scrolling if mounted

vnma0 · Mar 25, 2019 · 2c72ea0 · 2c72ea0
1 parent edc216c
commit 2c72ea0
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,7 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100%"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/app/problemList/codeEditor/codeBox.js b/src/app/problemList/codeEditor/codeBox.js
@@ -42,7 +42,7 @@ class CodeBox extends React.PureComponent {
     }
     render() {
         return (
-            <div style={{ flexGrow: 1 }}>
+            <>
                 <Divider light variant="inset" />
                 <AppBar position="static" color="default" elevation={0}>
                     <div id="optionTab" style={{ margin: '1% 1%' }}>
@@ -78,19 +78,19 @@ class CodeBox extends React.PureComponent {
                             </Grid>
                         </Grid>
                     </div>
+                </AppBar>
                 <div style={(
                     this.state.submitting ? 
-                    { opacity: 0.4, pointerEvents: 'none' } : {}
+                    { opacity: 0.4, pointerEvents: 'none', height: '100%' } : { height: '100%' }
                 )}>
                         <CodeEditor
                             readOnly={this.state.submitting}
                             ext={this.props.ext[this.state.currentLangId]}
                             update={this.handleUpdate}
                             code={this.state.code}
                         />
-                    </div>
-                </AppBar>
-            </div>
+                </div>
+            </>
         )
     }
 }

diff --git a/src/app/problemList/codeEditor/codeEditor.js b/src/app/problemList/codeEditor/codeEditor.js
@@ -177,6 +177,8 @@ class CodeEditor extends React.PureComponent {
                 value={this.props.code}
                 onChange={this.props.update}
                 width="100%"
+                height={`${window.innerHeight * 2}px`}
+                // set height to overwhelming large, so no problems even if screens get big
                 readOnly={this.props.readOnly}
             />
         );

diff --git a/src/app/problemList/problemTabEditor.js b/src/app/problemList/problemTabEditor.js
@@ -20,14 +20,22 @@ class ProblemTabEditor extends React.Component {
         this.handleTabChange = this.handleTabChange.bind(this)
     }
 
+    componentDidMount() {
+        document.querySelector('body').style.overflowY = 'hidden';
+    }
+
+    componentWillUnmount() {
+        document.querySelector('body').style.overflowY = 'auto';
+    }
+
     handleTabChange(value) {
         this.setState({
             currentTab: value,
         })
     }
     render() {
         return (
-            <div>
+            <div style={{ height: '100%' }}>
                 <ProblemTab
                     problems={this.props.problems}
                     handleTabChange={this.handleTabChange}

diff --git a/src/index.js b/src/index.js
@@ -84,7 +84,7 @@ class Hestia extends React.Component {
                     menuOpen={toggleSidenav}
                 />
                 <Router>
-                    <div>
+                    <div style={{ height: '75%' }}>
                         <Sidenav
                             pages={[
                                 {