Drupal 10.3 changes the sticky table class, breaking sticky views tables.

Created on 3 July 2024, 7 months ago

Problem/Motivation

Drupal core 10.3 remove the stick table header javascript and replaced it with pure CSS. It also changed the CSS class name. This causes two problems:
- The CSS class added for views tables in components\views-view--table.twig is now wrong for core 10.3+
- The CSS top that is set for the header is now fixed, rather than being calculated.

Steps to reproduce

1. Update to core 10.3+
2. Create a view with a the results displayed as a table and choose the sticky option.
3. Observe that the table's header is not sticky.

Proposed resolution

To support core 10.2 and below, both the old (.sticky-enabled) and new (.sticky-header) classes could be added. Not sure what to do about the hard-coded top position.

See related issue for the issue history. See the change notice: https://www.drupal.org/node/3440477 β†’

πŸ› Bug report
Status

Active

Version

6.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States DanChadwick

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

Comments & Activities

  • Issue created by @DanChadwick
  • πŸ‡ΊπŸ‡ΈUnited States DanChadwick

    This patch modifies displace.js to only consider, for data-offset-top, only elements with fixed positioning. My navbar is fixed for wider viewports, but for mobile, the navbar is allowed to scroll off the top of the page (position: static). Without this change, displace.js will consider the height of the navbar event for mobile, causing the thead to be position too low on the viewport.

    To make this work, I had to move the data-offset-top="" attribute from a wrapper div to the nav bar itself. This required some changes to the page and navbar templates. This could be accomplished in other ways.

    I also removed the wrapper div with class="table-responsive" from the views-view--table.twig template to allow the sticky position property to work. Sticky is incompatible with a parent h-offset:auto property.

  • Status changed to Needs work 6 months ago
  • Hey Dan, thanks for the issue/explanation and the patch, not sure what to do with the patch since it's against the core.

    That aside, we are not supporting anything less than 10.3 with Radix 6, so that's covered.
    I updated the class sticky-header but for now kept table-responsive class since that's needed on Bootstrap side

    Please take a look and let me know what you think

    • doxigo β†’ committed b40bc39a on 6.0.x
      Issue #3458866 by DanChadwick, doxigo: Drupal 10.3 changes the sticky...
  • πŸ‡ΊπŸ‡ΈUnited States DanChadwick

    Also need to remove the wrapper div to make sticky headers work.

    Agree I'm not sure what to do about making the page header work when it's fixed for wide viewports and scrolls away for not. I suppose javascript could be added that dynamically adds/removes the attribute that causes displace.js to consider the element. Alternative, and awkwardly, a patch could be added to the module with instructions for using. Or we could open a core issue, but my track record with getting issues like this committed has been poor.

  • πŸ‡ΊπŸ‡ΈUnited States DanChadwick

    I adjusted the component to not wrap the table with the bootstrap table-responsive div if sticky is enabled. I think this is the best we can do. If someone want's to have the nav bar work as I do, they'll have to patch core or similar.

    Calling this fixed unless someone has a better idea.

Production build 0.71.5 2024