Knack table bug, on scrolling the header becomes transparent and un-selectable

API & Customization
1

Okay, so this is happening

image
image1072×473 39.5 KB

this is default table from knack and on scroll the table header disappears and then re-appears but now its behind the table rows or something because its transparent and un-selectable . This is a dummy table and I looked at the DOM and looks like
image
thead has a style change on each scroll, on scroll start it makes opacity zero and on scroll stop opacity comes back to 1 and with new translate value on y axis, but how does that make it un-selectable?

Can someone help with what is this bug?

2

alright the fix is ::

 thead {
position:relative !important;
top:-10px !important;
z-index:5 !important;
}

the problem seem to be with the table header z index
reference:

1 Like
3

Hi Abe, unfortunately this overlap is due to a known bug that is currently on our engineering team’s backlog, however due to its visual nature it’s not something we’re able to prioritise at the moment.

Great to hear that you’ve managed to find a workaround - and thanks for sharing it here for other users!

4

Hi @Abe,
We were able to push out a fix for the table headers a few days ago - no custom code required now.
You can see details in the changelog: Tables sticky header behavior
Have a great day,
Kara

1 Like