Caldera form with date picker field in fancybox

Hi, I was not aware of the incompatibility but thanks for reporting.

It sounds like the fact that the form is “moved” to the light box frame, breaks the date picker script function bound to the date field. I fear there is no way around the issue. The light box does not work without the “move”, the date field bind will not work with it…

Unless there is a way to bind it again after the move. Do you know if the form has an event to (re)trigger the datepicker functions?

Hi,
The DatePicker field does popup in a lightbox-like window.
But I do not know if the form has an event to (re)trigger the datepicker functions.
It’s unfortunate that nothing can be done about it. It will be an overkill for me to use an extra plugin just for a couple of forms with date picker field.

FYI
I have tried 2 other plugins and the results are similar.
1. ‘Responsive Lightbox’ does not work with Caldera date picker field.
2. ‘Responsive Lightbox & Gallery’ only works with Caldera date picker field if lightbox setting in the plugin General Settings is set to PrettyPhoto or TosRUs. Other settings do not work either: SwipeBox, FancyBox, Nivo Lightbox, Image Lightbox, Featherlight, Magnific Popup.

Thank you anyway.
Regards, Vitali.

Do you have a page where I can see the issue live?

Hi,

Thanks again for getting back on this.

I have added 2 buttons to the following page https://www.thevisasofoz.com/portfolio/citizenship/.
The first one will launch a form with PrettyPhoto that comes with a theme and the second with Easy-Fancybox plugin.

I have tried to use PrettyPhoto for other forms but it does not seem to work with conditional fields that show/hide based on input.

For now I can just use PrettyBox for a few forms that use date picker fields and use Easy-Fancybox for everything else, ie iframes, other forms, pdf, etc.

Thanks again.
Regards, Vitali.

OK, I see what’s going wrong here. In caldera-forms/assets/build/css/caldera-forms-front.min.css there is this CSS rule:

.cfdatepicker {
    z-index: 10011!important;
}

The rule suppresses the dynamic z-index set by the datepicker script (which is a correct z-index) and forces it to a z-index that is lower than the one used by FancyBox. The datepicker works but hidden behind the light box frame.

You could ask the Caldera Forms dev(s) to remove this rule as it seems the script works fine without it, calculating a correct z-index dynamically. And in the mean time, try this in the theme’s Custom CSS:

.cfdatepicker {
    z-index: 1000011!important;
}

(note the extra zeros)

Or, since PrettyPhoto seems to be included by your theme anyway and unless there is an option to disable it, you might want to try to use that light box for all cases on your site. It’s better to limit the number of scripts, specially when they do the same thing…

Hi,

Thank you very much for your help.
Datepicker field is working now in fancybox with custom css that you provided.

I will follow your advice and either move everything to PrettyPhoto or try to disable it.

Thanks again.
Regards, Vitali.