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

Question

I use the jQuery user interface for various things, one of which is a date picker. I noticed that this div is adding 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>

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

Any ideas how I can get rid of this?

Thank!

Answer 1

This is a container that contains the HTML code for the widget when it is displayed. When the date picker is not visible, the container should be completely invisible. If you played with CSS themes, try restoring 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

Answer 2

, css . CSS- , , .

:

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

, , - , .