Sticky footer

AngelaRemolina · AngelaRemolina · commit ce6fd7311f39 · 2021-07-28T19:37:47.000-05:00
diff --git a/runestone/activecode/js/activecode_brython.js b/runestone/activecode/js/activecode_brython.js
@@ -30,12 +30,18 @@ export default class BrythonActiveCode extends ActiveCode {
             <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
             <style>
                 pre {
-                    position: absolute; font-size: 13px; width: 94%; padding: 9.5px; line-height: 1.42857143; border: 1px solid #ccc; border-radius: 4px;
-                    overflow: auto; height: 200px; clear: both; position: sticky; bottom: 0; resize: both; background: white; 
+                    position: sticky; max-height: 200px; width: 94%; overflow: auto; clear: both; resize: both; padding: 12px;
+                    background: white; font-size: 13px; line-height: 1.42857143; border: 1px solid #ccc; border-radius: 4px;
                 }
                 code{
                     border: 1px solid #ccc; border-radius: 4px;
                 }
+                html, body{
+                    height: max-content; width: 100%;
+                }
+                .container-pre{
+                    position: fixed; bottom: 0px; width: 100%;
+                }
             </style>
         </head>
         <body onload='brython()'>
@@ -46,8 +52,10 @@ import traceback
 
 preElem = html.PRE()
 logger = html.CODE()
+container = html.DIV()
+container.classList.add("container-pre")
 preElem <= logger
-
+container <= preElem
 class NewOut:
     def write(self, data):
         logger.innerHTML += str(data)
@@ -58,12 +66,14 @@ def my_exec(code):
     try:
         exec(code, locals())
         preElem.style.visibility = "visible"
-        out_header = document.createElement("h4")
+        out_header = document.createElement("text")
         out_header.innerHTML = "Output"
         out_header.style.font = "24px 'Arial'"
         logger.classList.add("plaintext")
+        preElem.prepend(document.createElement("br"))
+        preElem.prepend(document.createElement("br"))
         preElem.prepend(out_header)
-        document <= preElem
+        document <= container
     except SyntaxError as err:
         error_class = err.__class__.__name__
         detail = err.args[0]
@@ -89,17 +99,17 @@ def my_exec(code):
     error_header.style.font = "24px 'Arial'"
     preElem.prepend(error_header)
     preElem.style.visibility = "visible"
-    preElem.style.top = "5px"
     preElem.style.backgroundColor = "#f2dede"
     preElem.style.border = "1px solid #ebccd1"
     logger.classList.add("python")
 
-    document <= preElem
+    document <= container
 
 my_exec("""${prog}
 """)
 
 document <= html.SCRIPT("hljs.highlightAll();")
+document <= html.SCRIPT("let container = document.querySelector('.container-pre'); let height = container.offsetHeight; console.log(height); document.body.style.paddingBottom = String(height)+'px';")
             </script>
         </body>
         </html>
