Override jQuery UI Datepicker div visible strangely on first page load.

Question

Something strange afoot, here:

An instance of Datepicker is showing up in a weird place as a single bar in the upper left hand corner of this page.

I'm using both jQuery UI's Datepicker and Accordion on a page. In the CSS for the UI, the display:none for Datepicker seems to be overridden by the display:block for the Accordion, at least according to Firebug (see img below).

Then, once the Datepicker trigger is clicked in the 'catering/event room' tab (click one of the buttons to show div with Datepicker,) the display:none seems to then work.

Here's what the bad div looks like:

and here's the Firebug panel:

Answer 1

I had the same problem and while some of the above solutions work, the easiest fix of all is to add this to your css:

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

This basically hides the realigned datepicker element when it cannot be binded to an existing invisible element. You hide it, but it will be initialized again when you click on an element that needs to display the datepicker. Upon re-initialization, the datepicker element with id #ui-datepicker-div will have the correct position.