#4111 closed bug (fixed)

Opened February 10, 2009 10:14PM UTC

Closed December 25, 2010 01:27AM UTC

Last modified October 18, 2012 05:23PM UTC

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

Reported by: azendal Owned by:
Priority: major Milestone: 1.9.0
Component: ui.datepicker Version: 1.8.7
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (16)

Changed February 12, 2009 11:47PM UTC by jzaefferer comment:1

milestone: TBD → 1.6
priority: minor → major

Changed February 27, 2009 03:26PM UTC by neil.pugh comment:2

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.

Changed March 08, 2009 02:41PM UTC by rdworth comment:3

milestone: 1.7 → 1.8

Changed June 16, 2009 02:42AM UTC by nonplus comment:4

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; }

Changed November 04, 2009 06:26PM UTC by vrtxf comment:5

thanks alot nonplus, really great fix for starters.

Changed December 14, 2009 10:43PM UTC by nirvanaforu comment:6

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

Changed January 25, 2010 04:58AM UTC by kbwood comment:7

See also #5014.

Changed January 26, 2010 09:17PM UTC by fdemmer comment:8

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

Changed January 26, 2010 09:18PM UTC by fdemmer comment:9

... would have been nice.

Changed October 24, 2010 09:04AM UTC by ostgals comment:10

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.

Changed December 25, 2010 01:07AM UTC by steptom comment:11

_comment0: 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 CSS 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. \ → 1293239306845600
_comment1: 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 → 1293239325756395

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

Changed December 25, 2010 01:27AM UTC by scottgonzalez comment:12

resolution: → fixed
status: new → closed
version: 1.6rc5 → 1.8.7

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.

Changed February 08, 2011 08:33PM UTC by mirv comment:13

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!

Changed February 08, 2011 08:52PM UTC by scottgonzalez comment:14

Replying to [comment:13 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.

Changed April 30, 2012 06:35PM UTC by kolak comment:15

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

Changed October 18, 2012 05:23PM UTC by mikesherov comment:16

#6042 is a duplicate of this ticket.