Sticky table header dont work within an element with overflow set (e.g. tabs)

Created on 11 January 2024, 10 months ago

Problem/Motivation

📌 Use position: sticky for views sticky table header Fixed 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

🐛 Bug report
Status

Active

Version

10.2

Component
Claro 

Last updated about 22 hours ago

Created by

🇨🇭Switzerland saschaeggi Zurich

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

Comments & Activities

  • Issue created by @saschaeggi
  • 🇷🇺Russia kostyashupenko Omsk

    I can't figure out about which tabs and overflow you talking. Just did everything:

    - install webform module
    - enable webform and webform_templates submodule
    - go to /admin/structure/webform/templates
    - scroll down and check sticky header
    

    and table header is sticky on scroll

  • 🇷🇺Russia kostyashupenko Omsk

    Regarding that fact that overflow != visible removes 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)

  • 🇳🇱Netherlands bram.velthoven

    I'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.

  • 🇮🇳India junaidpv Kannur, Kerala

    Facing this issue.

  • 🇮🇳India nayana_mvr

    Can 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:-

    1. Installed and enabled Webform and Webform Template modules.
    2. Navigated to /admin/structure/webform/templates.
    3. Scrolled the table.
    4. Table header is positioned at the top on scroll as sticky header.

    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.

Production build 0.71.5 2024