Sticky Header on a Calendar Datapage

[kpcollier]

Anyone know if it is possible to make the header of a calendar datapage sticky? I have a color key/legend for the events on my calendar datapage in the header and would like to keep it at the top at all times when scrolling down the calendar. This will be used for mobile devices, so I need to have the Responsive feature on.

On a mobile calendar datapage, the events/records are displayed one by one and you scroll down to see the later dates. The top 'header' that displays the Month is sticky and scrolls with the page. I am trying to make it so my header is sticky as well. 

 

          

[kpcollier]

Some things I have tried:

Adding a sticky class - this is being ignored, or I'm just not doing it correctly. 

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Making the key/legend position: fixed - this one is keeping it sticky, and I am able to give the 'Month Header' the top css rule to be placed below the key when scrolling. But, I cannot figure out how to do the same to the actual events/results. The events are overlapping the legend at the top of the page when scrolled.

.container {
  position: fixed;
}

@media only screen and (max-width: 576px)
nav.cbResultSetCalendarStickyHeader {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    z-index: 1;
}

[kpcollier]

Never really found a proper way to do this. But, I did find a workaround that seems to be functioning fine. 

You'll need to give the Month header bar the following to give room for your header:

nav.cbResultSetCalendarStickyHeader {
    top: 100px;
} 

Then, you'll need to make your Datapage Header come in front of the events/records, and give it a white background to hide the events that overlap.

 .container {
 position: fixed;
 z-index: 999;
 background-color: white;
}

The body tag from the Caspio stylesheet has 8px of margin on the top, which lets 8px of the overlapping events show at the very top of the page. Just give the body a css rule to overwrite the margin-top.

body {
 margin-top: 0px;
}

Finally, to make sure that your events/records line up correctly (without this, the first date box would be slightly cut off from the top. Could maybe create missing dates on the calendar)

section.cbCalendarReport {
    margin-top: 85px;
}

You'll probably need to change the pixel values for most of these css rules to fit your needs. But I hope this helps someone. 

[Kronos]

Hi just wanna share my adjustments for this topic. 

I tried the provided code but I wasn't able to make the header stay on the top so I tried to readjust some of the code here just in case someone might have experience the same scenario.

Here is the code I used:

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

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