ui.datepicker css collision causing display:block on initial hidden state

[azendal]

at initial state you get this set of classes for ui.datepicker

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

ui-helper-clearfix has display:block ui-helper-hidden-accesible has left:-1e+8px; position:absolute;

but -1e+8px is ignored ant element is still inside body using space

[neil.pugh]

yes, i second this. this is only a problem prior to actually interacting with the datepicker. leaves a nasty bit of white space at the bottom of the page.

[nonplus]

Specifying a top value .ui-helper-hidden-accessible fixes the problem. I use the following custom CSS to work around this problem:

.ui-helper-hidden-accessible { top: -99999999px; }

[vrtxf]

thanks alot nonplus, really great fix for starters.

[nirvanaforu]

the trick (.ui-helper-hidden-accessible { top: -99999999px; }) can't solve this bug here: jQuery UIversion 1.7.2.

[kbwood]

See also #5014.

[fdemmer]

confirming: workaround works for me with jquery 1.4.1 and jquery-ui 1.7.2

i have to say though: the bug is open 12 months and it cost me a lot of time to find out why i had this white border/margin at the bottom. pushing a fix to trunk/stable sooner would have be

[fdemmer]

... would have been nice.

[ostgals]

The current release does not fix the bug. Checked in Opera 10.63, IE 8, Firefox 3.6.10 and Chrome 7.0.517.41 - all browsers except Chrome produces some white space at the bottom of document layout.

Currently I'm using my own workaround by adding css-rule: .ui-helper-clearfix { display:none; }

Here are link to screenshots from IE and FF: ​http://ostgals.freeiz.com/images/datepicker-ie.png ​http://ostgals.freeiz.com/images/datepicker-ff.png

I've set margins/padding of body to zero and shown borders of divs to make shots more illustrative. Just pay your attention to scrollbars on both images.

[steptom]

I have the same problem and it is very visible with web design. For your information, until the bug is fixed, I have found a palliative : Just add "display: none;" in the JQuery-UI CSS file at the ".ui-datepicker" class.

--> .ui-datepicker { display: none;width: 17em; padding: .2em .2em 0; }

I hope this will help you to wait the fix.

Best regards

[Scott González]

This was fixed in 1.8.7 with the fix for #4623 which prevents .ui-helper-hidden-accessible from taking up any space on the page.

[mirv]

I can confirm this is NOT fixed with latest jquery (1.5) and UI 1.8.9. the div doesn't have class ui-helper-hidden-accessible its [code] <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div> code

#5970 is not a duplicate but another iteration of the same bug!

[Scott González]

Replying to mirv:

I can confirm this is NOT fixed with latest jquery (1.5) and UI 1.8.9. the div doesn't have class ui-helper-hidden-accessible its [code] <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div> code

I don't understand your comment. The fix was removing the ui-helper-hidden-accessible class.

[kolak]

Fix .ui-helper-hidden-accessible { top: -99999999px; } breaks the vertical scroll in FF 12,.ui-helper-clearfix { display:none; } is fine.

[mikesherov]

#6042 is a duplicate of this ticket.