Freezing HTML Header

[ababcock]

I am trying to figure out a way to freeze the actual header on a results page. I know how to freeze the header row (the titles of each column), but I'm talking about the HTML Header above all of that. I have inserted info into this that I would like to scroll with the user as they go down the page. Is this possible?

[Alwayslost]

Easiest way I freeze any HTML above the datapages is to place the HTML in the "header" itself.

[vinebath]

I suggest that you check this guide from W3C on how to make a fixed header for you HTML page: https://www.w3schools.com/howto/howto_js_sticky_header.asp

There you can see an example and see how it is implemented with the code samples. 

[NailDyanC]

Just want to update this post, you may consider checking this link: 

 

[autonumber]

Hello! To free the header of your Results page, you can try this CSS code but make sure to click the 'Source' button first before you paste this. 

<style>
header{
     position: sticky !important;
      top: 0 !important;
      z-index: 1;
      background: #FFFFFF;
}
</style>

 

[Kronos]

Hi, would want to leave it here in case you want to have a sticky header on a Calendar DataPage:

<style>
nav.cbResultSetCalendarStickyHeader {
position: sticky !important;
top:0;
} 

body {
 margin-top: 0px;
}
</style>

 

[PotatoMato]

Hi! Just to update, Caspio has added a solution to have a sticky header on responsive datapages: https://howto.caspio.com/tech-tips-and-articles/enabling-sticky-headers-in-responsive-tabular-reports/