search

xaksis / vue-good-table

An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc
https://xaksis.github.io/vue-good-table/
MIT License
2.16k stars 405 forks source link

Table header scrolls when fixed-header is true #938

Open hepplerj opened 2 years ago

hepplerj commented 2 years ago

Issue Type (delete the irrelevant ones)

Specs

What version are you using? ^2.21.10

What browser? Safari; Firefox; Chrome

Expected Behavior

The fixed header to retain its position.

Actual Behavior

If my mouse cursor is on the table header and I scroll, it tries to scroll the header rather than the table/page. You can see the behavior in the screenshot below -- note the small scrollbar to the right and what seems to be two headers stacked on top of each other. If I turn off fixed-header, the issue is no longer present.

Additional relevant information: I'm using Nuxt (^2.13.3) with the Nuxt TailwindCSS plugin (^4.2.0). I'm using the table in remote mode; it seemed like the issue happened when I switched over to remote?

Steps to Reproduce the Problem

  1. Set :fixed-header to true
  2. Place the mouse cursor over the table header. Scroll and the header moves upwards; there seems to be two headers stacked on each other.
Fixed header scrolling.
yogithesymbian commented 2 years ago

same here , but only broken when tried to collapse sidebar on off .

cwilby commented 1 year ago

@hepplerj I'm curious if you found a workaround for this - I have one to offer here: https://github.com/xaksis/vue-good-table/issues/373#issuecomment-1464514347

hepplerj commented 1 year ago

@cwilby I think I ended up doing something similar with CSS as a work-around. My first instinct was to edit the module directly, but of course anytime an update happens to the module that I pull in from npm it gets overridden. (The fix at the time was to simply remove overflow-x, but position: sticky as a custom css seems more sustainable and is widely supported now).