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 problems:
- The CSS class added for views tables in components\views-view--table.twig is now wrong for core 10.3+.
- The div wrapper with class="table-responsive" conflicts with the thead postion:sticky property, causing the header to be displayed in the wrong location.
- The CSS top that is set for the header now relies on the calculated top set by displace.js, which may not be calculated properly for radix navbars.
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 displayed in the wrong location (or not at all).
To support core 10.2 and below, both the old (.sticky-enabled) and new (.sticky-header) classes could be added. Not sure how to support both core versions for the other issues.
See related issue for the issue history. See the change notice: https://www.drupal.org/node/3440477
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | displace-top-fixed-only.patch | 554 bytes | danchadwick |
Comments
Comment #2
danchadwick commentedThis 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.
Comment #3
doxigo commentedHey 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-headerbut for now kepttable-responsiveclass since that's needed on Bootstrap sidePlease take a look and let me know what you think
Comment #5
danchadwick commentedAlso 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.
Comment #7
danchadwick commentedI 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.