Question

New 'Layout' Designer v11 - Sticky Header CSS or compatible plugin

Forms Version 11 Forms Layout Designer

Updated April 10

asked on April 9

What is the best method for locking a table header so when users scroll down the table header 'freezes' on screen? Similar to 'freeze row' in Excel. I'd settle for the top section of the entire form to freeze.

I've been getting quite a few format specific requirements form one of my key stakeholders so I need to be certain it is not possible if I tell them it's not possible. I'm sure nobody can relate to that ;)

I can successfully get position: sticky on the thead element, but from what I am reading the container element needs to allow it as well.

Is there a plugin out there that is compatible with the LFForm object? I have seen several but they all require jQuery, so that is a no-go.

Anyone been down this road before? Thanks!

0 0

Replies

replied on April 9

.table-fixed thead,.table-fixed thead th {
  border: 1px solid #ddd;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;  /* 0px if you don't have a navbar, but something is required */
  background: white; /* If you don't set a background color, you'll be able to see through the header as you scroll */
  z-index:999;
}

This worked fine for me, assigning the "table-fixed" class to the target table.

2 0

replied on April 10

Thanks! I have a ton of conflicting css from the labels I have rotated. I'm going to tell my stakeholder they have to pick between rotated labels or a sticky header. I have too much going on in the css to be able to effectively support any issues with it.

versus:

0 0

You are not allowed to follow up in this post.

Question

Question

New 'Layout' Designer v11 - Sticky Header CSS or compatible plugin

Replies

Sign in to reply to this post.