Table Header - Position (Sticky-Top)

Hi everyone, I would like to know how not to overlap the table header when scrolling down? Also when printing, the table header is overlapping the details. How to avoid this to happen? Thanks :slight_smile:

1 Like

Hi @RONALD - this is a known issue that is on our radar. Currently, the only way around this would be to switch from ‘Max Width’ to ‘Full Width’ under your app settings > design > look and feel.

I’ll circle back here when there is an update. Thank you for your patience!

1 Like

Is there a fix for this yet? It’s causing my apps issues, especially when trying to print pages.

1 Like

Yeah, it’s a big problem. Unfortunately Knack lacks a report writer. But printing pages helps. That’s one of the major things that attracted me to Knack. So this should be fixed asap.

1 Like

Hi Jessie - just wondering if there was an ETA for this fix yet? It’s starting to become a recurring issue with my apps and I’m not sure how to get around it. My users love having the sticky header in the Max Width setting, but they don’t like that it overlaps the table header when scrolling.

Hi @RustySecri89667

Try adding the following code to your CSS:

thead {
  position: relative;
  z-index: 1;
  background-color: #ECECEC!important;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 12%);
}

Enjoy,

Knack Pros

Hi Ronald - I solved this just recently by adding a small code snippet into CSS

/* fixes the ridiculous table header row labels being not displayed or overwitten */

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

It’s the z-index which by default is set to auto causing it to have transparency thereby mingling the headers with the data below. Try this code it should solve your problem until they fix it