Changeset 7930

Timestamp:

Apr 27, 2021, 1:30:41 PM (2 years ago)

Author:

Nicklas Nordborg

Message:

References #2246: Sticky table headers

Started to implement this. In order to not break existing tables, the sticky-headers class must be set on lists that should have sticky headers. Tested on the extracts list page so far.

Note! The implementation only works with Firefox since it is the only browser that currently supports position: sticky; on the <thead> element. Other browsers support it on <th> elements, but we can't use that since we have more than one header row in the tables.

Location:

branches/3.18-stable/www

Files:

• biomaterials/extracts/list_extracts.jsp (modified) (1 diff)
• include/styles/table.css (modified) (2 diffs)

branches/3.18-stable/www/biomaterials/extracts/list_extracts.jsp

@@ -243 +243 @@
       item="<%=itemType%>"
       filterrows="<%=cc.getFilterRows()%>"
-      subclass="fulltable"
+      subclass="fulltable sticky-headers"
       data-inherited-annotations="true"
       data-relateditem-columns="true"

branches/3.18-stable/www/include/styles/table.css

@@ -353 +353 @@
   border-left-width: 1px;
   border-left-style: dotted;
-  padding: 1px 2px 1px 2px;
+  padding: 1px 2px 0px 2px;
   vertical-align: middle;
   min-width: 100px;
@@ -446 +446 @@
 }
 
-
-
-
-
+/* item list with "sticky-headers" mode */
+/* The <thead> section is kept sticky */
+/* We need separate borders or they will be removed in the header */
+.itemlist.sticky-headers div.data > table
+{
+  border-collapse: separate;
+}
+
+.itemlist.sticky-headers div.data > table > thead 
+{
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  border-bottom-width: 0;
+}
+
+/* The rules here are will "move" borders from <tr>/<thead> elements to <td>/<th> */
+.itemlist.sticky-headers div.data > table > thead > tr:last-child > th
+{
+  border-bottom-width: 1px;
+}
+
+.itemlist.sticky-headers div.data > table > tbody.rows > tr > *
+{
+  border-top-width: 1px;
+  border-top-style: dotted;
+  border-bottom-width: 1px;
+  border-bottom-color: transparent;
+}
+
+.itemlist.sticky-headers div.data > table > tbody.rows > tr:first-child > *
+{
+  border-top-color: transparent;
+}
+
+.itemlist.sticky-headers div.data > table > tbody.rows > tr.highlight:hover > *
+{
+  border-top: 1px solid #2288AA;
+  border-bottom: 1px solid #2288AA;
+}
+
+.itemlist.sticky-headers div.data > table > tbody.rows > tr.highlight:hover + tr > *
+{
+  border-top-color: transparent;
+}
+