Skip to content
Snippets Groups Projects

Issue #3408310: Sticky table header does not work if a table placed in a closed 'details' element

Issue #3408310: Sticky table header does not work if a table placed in a closed 'details' element

Closes #3408310

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
335 /**
336 * Event listener: Recalculates position of the sticky table header when the details
337 * element is toggled open.
338 */
339 function detailsToggleHandler(event) {
340 if (event.target.open) {
341 const tableHeaderInstance = document.querySelector('#edit-wrapper');
342 if (tableHeaderInstance) {
343 tableHeaderInstance.recalculateSticky();
344 }
345 }
346 }
347
348 // Add an event listener to the details element to listen to the toggle event.
349 document
350 .querySelector('#edit-wrapper')
  • utkarsh_33 added 1 commit

    added 1 commit

    • 6a09bc22 - Added generic selector and getting correct table instance

    Compare with previous version

  • utkarsh_33 added 1 commit

    added 1 commit

    • 5ad57bd2 - Reverted some unwanted changes from last commit

    Compare with previous version

  • 330 330 },
    331 331 );
    332 332
    333 /**
    334 * Event listener: Recalculates position of the sticky table header when the details
    335 * element is toggled open.
    336 */
    337 function detailsToggleHandler(event) {
    338 if (event.target.open) {
    339 const closestTable = event.target.querySelector('table.position-sticky');
  • 330 330 },
    331 331 );
    332 332
    333 /**
    334 * Event listener: Recalculates position of the sticky table header when the details
    335 * element is toggled open.
    336 */
    337 function detailsToggleHandler(event) {
    338 if (event.target.open) {
    339 const closestTable = event.target.querySelector('table.position-sticky');
    340 if (closestTable) {
    341 const tableHeaderInstance = TableHeader.tables.find(
    342 (table) => table.$originalTable[0] === closestTable,
    343 );
    344 if (tableHeaderInstance) {
    345 tableHeaderInstance.recalculateSticky();
    • This object is always empty as tableHeaderInitHandler is not called for the table. But if we change the selector in tableHeaderInitHandler to table.position-sticky then the table header is initialized. Also even when the function is called the headers stick at the top but the headers are still out flowing the details element horizontally.See the below attached SS. Screenshot_2024-05-22_at_11.52.59_AM

    • utkarsh_33 changed this line in version 5 of the diff

      changed this line in version 5 of the diff

    • Please register or sign in to reply
  • utkarsh_33 added 1 commit

    added 1 commit

    • 429d4577 - Added new instance of TableHeader

    Compare with previous version

  • Please register or sign in to reply
    Loading