You are viewing limited content. For full access, please sign in.

Question

Question

Forms Static Column Headers

asked on May 8, 2016 Show version history

Hi,

Is there an inherent method within Forms to have Static Headers for Tables that have very many rows so that the column header will not disappear when you scroll down? If not anyone that has a solution that has worked for them? Thanks

Regards,

Mark

0 0

Replies

replied on May 10, 2016

Hi Mark,

The short answer is "no" but maybe that option could be a feature in a future release of Forms.

You could experiment with using the CSS "position: fixed" rule which positions elements according to the screen; however, this presents a couple of challenges as (1) it can be difficult to place the elements initially, and (2) there is no guarantee that this would work the same across different displays.

An alternative to outright fixing the column headers as you scroll down a page could be to instead limit the height of the table element. Suppose you add a table in the Form Designer and assign the CSS class "fix-header" to it. Then you can use the following CSS:

.fix-header {
	/* establish reference to position column headers */
	position: relative;
}
.fix-header thead label {
  /* place the headers in a position relative to the table "field" */
  position: absolute;
	/* vertical offset from the table section header; can be adjusted based on style */
  top: 28px;
	/* in case of other styling, make the labels appear above other elements */
  z-index: 2;
}
.fix-header .cf-table_parent {
	/* set a maximum height for the table */
  max-height: 360px;
	/* add scrollbars when the maximum height is exceeded */
  overflow-y: auto;
}

The individual hard-coded values looked good for my style-less, theme-less form; you can tweak them to better fit your form.

Hope this helps!

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.