caMicroscope icon indicating copy to clipboard operation
caMicroscope copied to clipboard

Bug : Responsive table duplication on mobile screens due to stacktable.js multiple initializations

Open harshpreet14 opened this issue 3 months ago • 0 comments

Describe the bug The responsive tables rendered on mobile screens exhibit duplicated tables. The issue is caused by multiple instances of responsive tables being initialized by the stacktable.js plugin, without the previous instances being cleared from the DOM. This results in stacked tables accumulating and rendering duplicate content.

To Reproduce Steps to reproduce the behavior:

  1. Navigate to the Slides table page on a desktop browser.
  2. Activate responsive design mode, simulating a mobile viewport.
  3. Observe the manifestation of duplicate table instances indicated by multiple .stacktable.small-only elements.

Expected behavior There should be no table duplicates in the table.html page.

Screenshots

Screenshot 2024-03-22 202425 image

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome
  • Version 123.0.6312.58 (Official Build) (64-bit)

Additional context When the page is loaded or when certain actions trigger a table refresh on mobile devices, the stacktable.js plugin is called to create the mobile-friendly table layout. If the plugin is called multiple times without proper cleanup, each call generates a new stacked table, leading to multiple stacked tables being inserted into the DOM.

harshpreet14 avatar Mar 22 '24 15:03 harshpreet14