Freeze header in Header & Footer Block

[SteveMott]

Hi

I have implemented my Caspio app using the embed method. My page has a header & footer in place and the result is this:

 

When I scroll the table the header scrolls up and I lose sight of the header block:

 

Is it possible to freeze the header block (not the table header) so that it always displays?

Thanks

Steve

 

 

[autonumber]

Hi @SteveMott - can you confirm if the header block that you are referring to is the PHARMA ADVISOR menu at the top? If yes and if this is located on the header of your DataPage in Caspio, you can try to paste this code on the header as well but make sure to click the 'Source' button before pasting this code:

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

But if this will not work, can u send the URL to your page so we can try to check? 

[SteveMott]

Thanks autonumber. Just got your reply. Will try tomorrow (I'm on UK time!)

The header is in the datapage Header.

Thanks

Steve

[SteveMott]

Hi autonumber 

I couldn't get the code to work but, inspired by your comments, have fixed the problem by moving the header code to my HTML Web page!

Once again, many thanks. 

Steve

[SteveMott]

Hi autonumber 

I tried your code again and it worked!

The header is a table so I added your code into the <table... statement and ... success.

Many thanks

Steve

[Kronos]

Hi, leaving this here just 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>

 

[NailDyanC]

Just want to add, you may also try this workaround if it will work for you: ttps://howto.caspio.com/datapages/reports/fixed-rows-and-columns/

[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/