search

koalyptus / TableFilter

A Javascript library making HTML tables filterable and a bit more :)
https://www.tablefilter.com
MIT License
324 stars 95 forks source link

Help instructions layout issue when table is responsive #772

Closed MatanDavidi closed 4 years ago

MatanDavidi commented 4 years ago

Whenever a table is set to be responsive, when the screen is narrow enough that the table has to overflow, if the help instructions button is clicked, the help instructions overlay is shown to the right of the table instead of directly underneath it. See enclosed image.

Reproduction steps: Steps to reproduce the behavior:

  1. Instantiate a TableFilter object with param "responsive" set to "true" (responsive: true) inside of its configuration object
  2. Open page with TableFilter table
  3. Resize the window or use the browser's developer tools to make the viewport narrow enough that the table has to overflow horizontally
  4. Scroll towards and click the help instructions button

Expected behavior The help instructions overlay appears directly underneath the help instructions button

Observed behavior: The help instructions overlay appears to the right of the table, outside of it.

Screenshots Image that shows the bug image

TableFilter version: 0.6.105 Browser and version: Google Chrome 80.0.3987.132 (official Build) x64, Mozilla Firefox 73.0.1 x64 OS and version: Microsoft Windows 10 Home Version 10.0.18362 build 18362 Device: HP Pavilion - 15-au147nz

Additional information/context: The first image is the actual application of the library, the second image is a demo I wrote specifically for this issue. Sorry for the bad quality.

I suspect it has something to do with the horizontal scrolling, since the issue does not happen when you can click the button without scrolling.

koalyptus commented 4 years ago

Ciao @MatanDavidi, Starting from v.0.7.0 above inconsistency should be fixed. As per #780 PR, the fix introduces a help_instructions.container_adjust_left_position option that allows to adjust pixel positioning of the help pop-up container if needed: