#4111 closed bug (fixed)
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
Change History (16)
comment:1 Changed 14 years ago by
Milestone: | TBD → 1.6 |
---|---|
Priority: | minor → major |
comment:2 Changed 14 years ago by
comment:3 Changed 14 years ago by
Milestone: | 1.7 → 1.8 |
---|
comment:4 follow-up: 15 Changed 14 years ago by
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; }
comment:6 Changed 13 years ago by
the trick (.ui-helper-hidden-accessible { top: -99999999px; }) can't solve this bug here: jQuery UIversion 1.7.2.
comment:8 follow-up: 9 Changed 13 years ago by
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
comment:10 Changed 12 years ago by
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.
comment:11 Changed 12 years ago by
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
comment:12 Changed 12 years ago by
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.
comment:13 follow-up: 14 Changed 12 years ago by
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!
comment:14 Changed 12 years ago by
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.
comment:15 Changed 11 years ago by
Fix .ui-helper-hidden-accessible { top: -99999999px; } breaks the vertical scroll in FF 12,.ui-helper-clearfix { display:none; } is fine.
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.