
Problem/Motivation
#3362276: Use position: sticky for views sticky table header introduced position: sticky
to replace the JS workaround with duplicating the header.
But this technique has currently one big flaw: when placed within e.g. tabs which uses overflow
it will not work, as sticky does not go well with overflow
set to anything else than visible
.
Steps to reproduce
Check out a table within tabs
E.g.:
- install webform module
- enable webform and webform_templates submodule
- go to /admin/structure/webform/templates
- scroll down and check sticky header
Proposed resolution
Either find a workaround or remove overflow
from elements like tabs
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
Comment | File | Size | Author |
---|---|---|---|
#8 | 3414067-test.png | 773.59 KB | nayana_mvr |
#8 | 3414067.mov | 4.01 MB | nayana_mvr |
#5 | Screenshot 2024-03-28 at 08.32.36.png | 134.48 KB | bram.velthoven |
#2 | Снимок экрана 2024-01-12 в 17.36.39.png | 252.23 KB | kostyashupenko |
Comments
Comment #2
kostyashupenkoI can't figure out about which tabs and overflow you talking. Just did everything:
and table header is sticky on scroll
Drupal 10.2 + Umami profile
Comment #3
kostyashupenkoRegarding that fact that overflow != visible disables position sticky behavior - it's clear. Just need to understand how exactly it can be reproduced (when table can live in the element with overflow hidden for example)
Comment #5
bram.velthoven CreditAttribution: bram.velthoven at Finalist commentedI've been able to reproduce this. header with position: sticky and child with overflow auto gives problems with the header positioning. for now i've created a local patch removing the overflow: auto to overflow: clip. so i at least have a functional page.
Comment #6
vensiresComment #7
junaidpvFacing this issue.
Comment #8
nayana_mvr CreditAttribution: nayana_mvr at Material commentedCan someone please specify the steps again to reproduce this issue. Because I'm unable reproduce the issue with the steps mentioned in the IS. Steps followed:-
/admin/structure/webform/templates
.Attaching a screen recording for reference. Also, noticed that the
table
is not within the.tabs
in this case. Please correct me if I'm not correctly understanding the issue.Is there any other scenario where this issue can be reproduced in D11? Because Webform module is not compatible with 11.x yet.
Comment #9
vensiresComment #10
saurav-drupal-dev CreditAttribution: saurav-drupal-dev as a volunteer and at Material for Drupal India Association commentedunable to reproduce the issue.