Using the jQuery UI Datepicker with Fancybox

I just wasted what seems to be far too much of my life (about 30 minutes), trying to figure out why the jQuery UI Datapicker wouldn’t work when it was applied to a text box within a Fancybox.

It turns out it was working, but it was being placed behind the Fancybox which had it’s z-index set to 1101.

Adding the following CSS worked a treat

    z-index: 1102 !important;
Posted on by Joe in jQuery

3 Responses to Using the jQuery UI Datepicker with Fancybox

  1. Hugh Lang

    Thanks for this. It seems the z-index arms race continues.

    In fancybox 2.1.3 and related, the z-index is now as high as 8060. (At least in the code I inherited)

  2. aa

    thanks its working for me.

  3. Trisha

    Thank you!! I have spent HOURS on this insanely annoying issue, and yours was the first post that even mentioned z-index…not sure I’d have gotten around to checking that since my datepicker had a z-index of 9999 – one would think that would be adequate!

    I’m using the Fancybox Plugin for WordPress version 1.5.6 and the z-index in the plugin’s stylesheet is at 11100.

    I’m off to complain to the plugin developer – it should come with some instructions on how to properly set the z-index for the datepicker-ui……I’m sure a LOT of website owners use a datepicker in an overlay and this just causes tons of unneccesary forum posts everywhere with a boatload of solutions that will never work thanks to a ridiculously high z-index decision on the part of the Fancybox developer.

Add a Comment