Have display control checkboxes (show rules/spaces) float to the right

diff --git a/src/pgwui_sql/static/pgwui_sql.css b/src/pgwui_sql/static/pgwui_sql.css
index c1ea714b31642140898fd703bea80cd1877be2e0..dc02ea21808330abc8dc48b42e3a0b647701469f 100644 (file)
--- a/src/pgwui_sql/static/pgwui_sql.css
+++ b/src/pgwui_sql/static/pgwui_sql.css
@@ -60,12 +60,14 @@ textarea.sqltext { height: 40em;
                  background-color: white;    /* kludge, see above */
                  border-collapse: collapse;  /* cover tbody background */
                  text-align: left; }
-.stickycontainer { overflow-y: clip; }     /* attach to heading's container */
+.stickycontainer { overflow-y: clip;       /* attach to heading's container */
+                   width: fit-content; }
 .stickyfooting { position: sticky;         /* attach to footer */
                  bottom: 0;
                  background-color: white;  /* kludge, see above */
                  text-align: right; }
-
+.stickyrightbar { position: sticky;        /* attach to span in footer */
+                  right: 0; }
 /* The information on EOL normalization */
 tr.eol_info > td > span > p { cursor: pointer; }
 tr.eol_info > td > span > p + p { margin-left: 10%;

diff --git a/src/pgwui_sql/templates/sql.mak b/src/pgwui_sql/templates/sql.mak
index 54c134ff837687961e7fb323011d2a8b6e4bec50..bbe9cb927a40b8ef9108c39fc2a1e3ff3a9d85dd 100644 (file)
--- a/src/pgwui_sql/templates/sql.mak
+++ b/src/pgwui_sql/templates/sql.mak
@@ -168,31 +168,33 @@
     % endfor
     <div class="stickyfooting">
       <hr>
-      <%self.lib:td_label for_id="show_rules_id">
-        Show rules
-      </%self.lib:td_label>
-      <%self.lib:td_input tab_index="${tab_index}">
-        <input name="show_rules"
-               id="show_rules_id"
-               tabindex="${tab_index.val}"
-               type="checkbox"
-               ${show_rules | n}
-               onchange="rulesDisplay(this.checked)"
-        />
-      </%self.lib:td_input>
-
-      <%self.lib:td_label for_id="show_spaces_id">
-        Show spaces
-      </%self.lib:td_label>
-      <%self.lib:td_input tab_index="${tab_index}">
-        <input name="show_spaces"
-               id="show_spaces_id"
-               tabindex="${tab_index.val}"
-               type="checkbox"
-               ${show_spaces | n}
-               onchange="whitespaceDisplay(this.checked)"
-        />
-      </%self.lib:td_input>
+      <span class="stickyrightbar">
+        <%self.lib:td_label for_id="show_rules_id">
+          Show rules
+        </%self.lib:td_label>
+        <%self.lib:td_input tab_index="${tab_index}">
+          <input name="show_rules"
+                 id="show_rules_id"
+                 tabindex="${tab_index.val}"
+                 type="checkbox"
+                 ${show_rules | n}
+                 onchange="rulesDisplay(this.checked)"
+          />
+        </%self.lib:td_input>
+
+        <%self.lib:td_label for_id="show_spaces_id">
+          Show spaces
+        </%self.lib:td_label>
+        <%self.lib:td_input tab_index="${tab_index}">
+          <input name="show_spaces"
+                 id="show_spaces_id"
+                 tabindex="${tab_index.val}"
+                 type="checkbox"
+                 ${show_spaces | n}
+                 onchange="whitespaceDisplay(this.checked)"
+          />
+        </%self.lib:td_input>
+      </span>
     </div>
   </div>
 </%def>