jQueryUI Datepicker Calendar Control Visible at the Bottom of the Page CodeUnit 24 JUN 2011

For some or other annoying reason, my jQueryUI datepicker controls start exhibiting a weird bug where on page load, the normally hidden control calender was appearing right at the bottom of the page. Clicking on the launch control would then bring up the calendar correctly, and on selection or unfocus would then hide it again correctly. So only on page load then.

Luckily the fix to this annoying problem is actually nothing more than a simple CSS rule which you can add to the top of the affected page. (Note that this is after I spent a fair amount of time updating all my javascript plugins and trawling through the code to try and find the problem).

To solve, simply add:

#ui-datepicker-div { display: none; }

Yup, nothing more than that and your unwanted extra space at the bottom of the page is done for.

Nifty. (And yes, I still regard the jQuery and jQueryUI combo’s datepickers as one of the best ones currently available to website designers!)

Related Link: http://jqueryui.com/demos/datepicker/

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • Benben

    Thanks a lot !

    • No problem! It was quite annoying when I first stumbled across this little defect!

  • Thanks alot for the fix. It has caused me a lot of headache and easy solution like that should be rolled out with the actual release.

    Thanks once again

    • Agreed. Was quite surprised this issue made it out into the wild in the first place!

  • Rick

    Thank you!

  • Paul

    Thanks Craig.  I spent way too long with this before spotting your fix —

    • No problem, glad it was of some use to you! :)