Changeset 7930 for branches/3.18-stable


Ignore:
Timestamp:
Apr 27, 2021, 1:30:41 PM (7 weeks 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:
2 edited

Legend:

Unmodified
Added
Removed
  • branches/3.18-stable/www/biomaterials/extracts/list_extracts.jsp

    r7914 r7930  
    243243      item="<%=itemType%>"
    244244      filterrows="<%=cc.getFilterRows()%>"
    245       subclass="fulltable"
     245      subclass="fulltable sticky-headers"
    246246      data-inherited-annotations="true"
    247247      data-relateditem-columns="true"
  • branches/3.18-stable/www/include/styles/table.css

    r7909 r7930  
    353353  border-left-width: 1px;
    354354  border-left-style: dotted;
    355   padding: 1px 2px 1px 2px;
     355  padding: 1px 2px 0px 2px;
    356356  vertical-align: middle;
    357357  min-width: 100px;
     
    446446}
    447447
    448 
    449 
    450 
    451 
     448/* item list with "sticky-headers" mode */
     449/* The <thead> section is kept sticky */
     450/* We need separate borders or they will be removed in the header */
     451.itemlist.sticky-headers div.data > table
     452{
     453  border-collapse: separate;
     454}
     455
     456.itemlist.sticky-headers div.data > table > thead
     457{
     458  position: sticky;
     459  top: 0;
     460  z-index: 10;
     461  border-bottom-width: 0;
     462}
     463
     464/* The rules here are will "move" borders from <tr>/<thead> elements to <td>/<th> */
     465.itemlist.sticky-headers div.data > table > thead > tr:last-child > th
     466{
     467  border-bottom-width: 1px;
     468}
     469
     470.itemlist.sticky-headers div.data > table > tbody.rows > tr > *
     471{
     472  border-top-width: 1px;
     473  border-top-style: dotted;
     474  border-bottom-width: 1px;
     475  border-bottom-color: transparent;
     476}
     477
     478.itemlist.sticky-headers div.data > table > tbody.rows > tr:first-child > *
     479{
     480  border-top-color: transparent;
     481}
     482
     483.itemlist.sticky-headers div.data > table > tbody.rows > tr.highlight:hover > *
     484{
     485  border-top: 1px solid #2288AA;
     486  border-bottom: 1px solid #2288AA;
     487}
     488
     489.itemlist.sticky-headers div.data > table > tbody.rows > tr.highlight:hover + tr > *
     490{
     491  border-top-color: transparent;
     492}
     493
Note: See TracChangeset for help on using the changeset viewer.