JQuery UI Datepicker Adding Code Before </body> - Messing Up Layout

I'm using JQuery UI for various things, one being the datepicker. I've notice it's adding this div at the end of my page:

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" id="ui-datepicker-div"></div>

just before the </body> tag. Which leaves a 40px-ish gap at the bottom of the page after my footer.

Any ideas how I can get rid of this?

开发者_如何学运维Thanks!

That's a container that holds the HTML for the widget when you display it. When the date picker is not visible, the container should be completely invisible. If you've played with the CSS of the theme, try to restore it:

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css

I had this same problem when I had multiple plugins with various css files on the same page. I was unable to add the layout helper css because it was already included so adding it in didn't help.

Instead I just did this:

$('#ui-datepicker-div').hide();

This is a terrible hack but I hope it saves someone hours of debugging like it did for me.