CS Forms Datepicker Possible Bug

Beta
#1

Hi Charlie,

There seems to be a possible bug with the CS Forms datepicker element. I have tried using it on several websites, all with the same result.

My basic setup is as in the screenshot - note I am using two separate fields for date and time:

image
image287×852 20.1 KB

image
image297×850 19.6 KB

image
image731×185 5.82 KB

On the front end, the fields are greyed out, but when clicked, the calendar does not appear. The only way I can get the calendar to display is if it is set Inline. Click to Open does not seem to do anything.

Any ideas what could be going on?

Thanks,
Christopher

#2

I believe the popup is showing, but it’s hidden because the z-index isn’t large enough for the off canvas. Does the following CSS help you out? I could not login via the details, but you can also send me a .tco file so I can double check you will be okay when I make a Forms update. Let me know if this helps and have a great day.

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 999999999;
}
#3

You are absolutely right, as ever. However, the CSS needs one vital change to work - !important

.flatpickr-calendar.open {
  display: inline-block !important;
  z-index: 999999999 !important;
}

For me only the addition of !important makes the difference and allows the picker to be shown. Many thanks for the fix - I assume it will hit a future minor release.

Many thanks as usual!

#4

This is issue is release in the latest Cornerstone Forms. Happy to help.

#5

Thank you!