Have column headings in SQL results "stick" on the page

diff --git a/src/pgwui_sql/static/pgwui_sql.css b/src/pgwui_sql/static/pgwui_sql.css
index a752e5dffd9107732e8ba535c79e0f233871f40e..905812339d57b890887e2104673f3122b286a67f 100644 (file)
--- a/src/pgwui_sql/static/pgwui_sql.css
+++ b/src/pgwui_sql/static/pgwui_sql.css
@@ -36,3 +36,24 @@ textarea.sqltext { height: 40em;
 .innerbreak { border-style: dotted;
               border-bottom: 0px;
               color: lightgrey; }
+
+/* For allowing headings to "float" inside an element until the containing
+   element is off the screen */
+/* Figuring out what the actual background color is is complex, see:
+   https://stackoverflow.com/questions/46336002/how-to-get-computed-background-color-style-inherited-from-parent-element
+   Summary: background-color does not inherit, so you have to traverse the DOM.
+   And once you're done, figuring out if the background is transparent or not,
+   and what to do about it, is non-trival because window.getComputedStyle()
+   returns text, and there are multiple textual representations of a color
+   and it's transparency that may vary by browser.  The point is to
+   attach to the stickheading a non-transparent background matching what
+   displays as the current background.  This seems either difficult or
+   impossible.
+
+   So don't try.  Instead, set the background to "white", the same that
+   we set in the body's background.  And then assume that all the backgrounds
+   in-between are transparent. */
+.stickyheading { position: sticky;        /* attach to heading */
+                 top: 0;
+                 background-color: white; }  /* kludge, see above */
+.stickycontainer { overflow-y: clip; }    /* attach to heading's container */

diff --git a/src/pgwui_sql/templates/sql.mak b/src/pgwui_sql/templates/sql.mak
index 2ecd923b153579c360c2d8dfd0d59bd950d58d1f..837f1115e6e23a2c02fc13517d1cf865e5ab6194 100644 (file)
--- a/src/pgwui_sql/templates/sql.mak
+++ b/src/pgwui_sql/templates/sql.mak
@@ -67,7 +67,7 @@
   <% if headings is None:
        return STOP_RENDERING
   %>
-  <thead>
+  <thead class="stickyheading">
     <tr>
       % for heading in headings:
           <th>${heading}</th>
@@ -104,7 +104,7 @@
       % endif
 
       % if result_row.rows:
-          <table>
+          <table class="stickycontainer">
             % if result_row.heading is not None:
                 ${self.render_heading(result_row.heading.data)}
             % endif
@@ -139,7 +139,7 @@
                   + ',left=' + (window.screenLeft + window.outerWidth)
                   + ',top=' + window.screenTop)
            .focus();
-  };
+  }
 </script>
 
 <noscript>