Contrib.social

Table sticky header appears when table not in viewport

Open on Drupal.org →
Created on 7 September 2023, about 1 year ago
Updated 17 September 2023, about 1 year ago

Problem/Motivation

The sticky table header is triggered whenever the header is out of the viewport, even if the header is below the bottom of the viewport. In other words, when the table is out of view (at the bottom of the page), the sticky header will show on top of the page, covering some necessary contents.

Steps to reproduce

Just go to any admin interface with a sticky table near the lower half of the page. View pages with a preview table on the bottom is a good choice. The sticky table header will show when the page is loaded. Start scrolling, and the sticky header will disappear when the actual table header comes into the viewport. Then when the table is scrolled up enough to hide the header, the sticky header will show again as expected.

Proposed resolution

The trigger is the IntersectionObserver in tableheader.js (themes/contrib/gin/js/overrides/tableheader.js)

the statement on line 16

if (!e.isIntersecting && e.rootBounds.top === stickyOffsetTop)

is checking rootBounds.top with the stickyOffsetTop. However, since the sticky table header is inside of the real table, and it's positioned absolutely on top of the page at the stickyOffsetTop location, the test e.rootBounds.top === stickyOffsetTop will always be TRUE.

Instead, it should be using e.intersectionRect.top === stickyOffsetTop so it's checking the top of the table position rather than its parent.

Original code

              if (!e.isIntersecting && e.rootBounds.top === stickyOffsetTop) {
                context.querySelector('.gin-table-scroll-wrapper').classList.add('--is-sticky');
              } else {
                context.querySelector('.gin-table-scroll-wrapper').classList.remove('--is-sticky');
              }

New code

              if (!e.isIntersecting && e.intersectionRect.top === stickyOffsetTop) {
                context.querySelector('.gin-table-scroll-wrapper').classList.add('--is-sticky');
              } else {
                context.querySelector('.gin-table-scroll-wrapper').classList.remove('--is-sticky');
              }

Remaining tasks

Someone please test this and see if I should generate a patch.

🐛 Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

🇺🇸United States jmouse888

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jmouse888
  • Assigned to shubham_jain
  • Comment about 1 year ago →
    🇮🇳India shubham_jain
  • Comment about 1 year ago →
    🇺🇸United States jmouse888

    I'd like to clarify something. When using intersectionObserver, it's recommended to use rootBounds. However, we face a problem with the sticky header <table> tag as it exists within the actual <table> tag and is positioned absolutely at the stickyOffsetTop. This causes the rootBounds.top of the actual table to always be at the stickyOffsetTop position when the table is outside of the bottom of the viewport, triggering the display.

    When using intersectionRect for the real table, only the visible area of the table is considered, which does not include the hidden sticky header <table>.

    Alternatively, instead of changing to intersectionRect, we can move the sticky header <table> outside of the main <table> tag in HTML. I don't know if this is done by Gin or Claro. I believe most other themes do that, but the pros and cons of doing so is another debate for another day.

  • Comment about 1 year ago →
    🇺🇸United States jmouse888
  • Comment about 1 year ago →
    🇺🇸United States jmouse888

    Generated a patch to change the rootBounds to intersectionRect. I don't know how to do a merge request or even be able to. Someone test this please. Make sure to clear the browser's cache as well as the Drupal cache.

  • Comment about 1 year ago →
    🇮🇳India shubham_jain

    Hi everyone, I tried the patch in the comment #5 but it didn't resolve the issue. Attaching the screenshot for reference.

  • Comment about 1 year ago →
    🇺🇸United States jmouse888

    #6, Can you put a watch on "e" and see what value it has when the header is visible? Or when you scroll up and down? thx.

  • Status changed to Needs review about 1 year ago
  • Comment about 1 year ago →
    🇮🇳India shubham_jain
  • Comment about 1 year ago →
    System Message
    • saschaeggi → committed 3c74d46d on 8.x-3.x 
      Issue #3386007 by jmouse888: Table sticky header appears when table not...
  • Status changed to Fixed about 1 year ago
  • Comment about 1 year ago →
    🇨🇭Switzerland saschaeggi Zurich

    Thanks @jmouse888

    Verified on 10.1.3 on a views edit page with a sticky table.

  • Comment about 1 year ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024