Table Header - Position (Sticky-Top)

Help Center Get Answers
1

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:

image
image1592×368 27.4 KB

1 Like
2

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
4

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

1 Like
5

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
6

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.

7

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

1 Like
8

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

1 Like
9

@KnackPros This was working great for me on Chrome but I noticed this morning that it’s not working on Safari. Any idea how to tweak it to work on Safari as well?

10

Just Safari and not Chrome?

Hmmm, a while back (12 months or so) I noticed Safari not honouring some CSS styling orders (where there were multiple style declarations typically with font or background colours) , not sure how that could happen, but it was an issue for me on some background colours in rows that worked in Chrome but not Safari for some reason. I fixed it with !important; to apply this style last. I have not seen it for a while, so I assume they fixed it or it was me stuffing something up … anyway;

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

You should not have to do this, but you could try this, just in case the issue in Safari is back!?