Jump to content
  • 0

Sticky Header on a Calendar Datapage


Question

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. 

 

calendarheader1.thumb.JPG.4837dd7bf6e3722b72cffd4e6ba544d2.JPG          calendarheader2.JPG.4f9d8a763efa99accf032546eb338e78.JPG

Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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;
}

calendarheader3.JPG.d86add66b2ac3977a6a47f5ffb3611a8.JPG

Link to post
Share on other sites
  • 0

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. 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...