Finally got the divs to display correctly by making the mailbox a part of the top...

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 0de3536ac81679312a6c87987649f78a4943f29b..3741957c53af0d73f769a168215057fb96034ad7 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -197,35 +197,13 @@ blockquote pre {
        z-index: 6;
 }
 
-.ctdl-mailbox-outer {
-       position: absolute;
-       top: 0%;
-       height: 50%;
+.ctdl-mailbox-pane {           /* list of messages when in mailbox view */
        width: 100%;
+       height: 20em;
        overflow-x: hidden;
        overflow-y: scroll;
-       background-color: #FF8888;
-}
-
-.ctdl-reading-outer {
-       position: absolute;
-       top: 50%;
-       height: 50%;
-       width: 100%;
-       overflow: scroll;
-       background-color: #88FF88;
-}
-
-.ctdl-mailbox-pane {           /* list of messages when in mailbox view */
-       display: none;
-       position: relative;
-       width: 100%;
-       height: 100%;
 }
 
 .ctdl-reading-pane {           /* message reading/composing pane when in mailbox view */
-       display: none;
-       position: relative;
-       width: 100%;
-       height: 100%;
+       overflow: auto;
 }

diff --git a/webcit-ng/static/index.html b/webcit-ng/static/index.html
index 3385895f5a3a56adace5ecf5757d7aa40b311701..a25df864ebfaceea73cb6adf9ed8842da75f8798 100644 (file)
--- a/webcit-ng/static/index.html
+++ b/webcit-ng/static/index.html
@@ -52,10 +52,11 @@ LOADING
 <div class="w3-overlay w3-hide-large w3-animate-opacity" onClick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
 
 <!-- This div contains both the top bar and the main pane -->
-<div id="ctdl-bar-and-main" class="w3-main" style="margin-left:300px; position:absolute; height:100%; left:0; right:0; overflow-y:scroll; border:3px solid orange">
+<div id="ctdl-bar-and-main" class="w3-main" style="margin-left:300px; position:absolute; height:100%; left:0; right:0; overflow-y:scroll">
 
 <!-- Top container -->
-<div id="navbar" class="w3-bar w3-black w3-large w3-main" style="z-index:4; position:sticky; top:0;">
+<div style="z-index:4; position:sticky; top:0;">
+<div id="navbar" class="w3-bar w3-black w3-large w3-main">
        <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onClick="w3_open();"><i class="fa fa-bars"></i>  Menu</button>
        <span class="w3-left">
                <span class="w3-bar-item" id="ctdl-logo">CITADEL</span>
@@ -71,6 +72,11 @@ LOADING
                <button id="lilo" class="w3-bar-item w3-button">Login</button>
        </span>
 </div>
+       <div>
+               <div id="ctdl-stuffbar" style="display:none">
+               </div>
+       </div>
+</div>
 
 <!-- MAIN PANE CONTENT DIV -->
 <div id="ctdl-main" class="w3-main">

diff --git a/webcit-ng/static/js/view_mail.js b/webcit-ng/static/js/view_mail.js
index 2e1dcd90a04caae5e0b66cb0ae08d207c1f07267..1d218fb9e4d5a718bdc43348406f35bc123efe30 100644 (file)
--- a/webcit-ng/static/js/view_mail.js
+++ b/webcit-ng/static/js/view_mail.js
@@ -130,14 +130,13 @@ function mail_render_row(msg) {
 
 // Set up the mailbox view
 function mail_display() {
-       document.getElementById("ctdl-main").innerHTML
-               = "<div id=\"ctdl-mailbox-outer\" class=\"ctdl-mailbox-outer\">mailbox-outer</div>"
-               + "<div id=\"ctdl-reading-outer\" class=\"ctdl-reading-outer\">reading-outer</div>"
-       ;
+       document.getElementById("ctdl-stuffbar").style.display = "block";
+
+       document.getElementById("ctdl-stuffbar").innerHTML
+               = "<div id=\"ctdl-mailbox-pane\" class=\"ctdl-mailbox-pane\"></div>"
 
        document.getElementById("ctdl-main").innerHTML
-               += "<div id=\"ctdl-mailbox-pane\" class=\"ctdl-mailbox-pane\"></div>"
-               + "<div id=\"ctdl-reading-pane\" class=\"ctdl-reading-pane\"></div>"
+               = "<div id=\"ctdl-reading-pane\" class=\"ctdl-reading-pane\"></div>"
        ;
 
        refresh_mail_display();
@@ -163,6 +162,7 @@ function refresh_mail_display() {
        catch {
                console.log("ending refresh_mail_display()");
                clearInterval(RefreshMailboxInterval);
+               document.getElementById("ctdl-stuffbar").style.display = "none";
                return;
        }