Ticket #4111 (closed bug: fixed)

Opened 6 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

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

comment:1 Changed 6 years ago by joern.zaefferer

  • Priority changed from minor to major
  • Milestone changed from TBD to 1.6

comment:2 Changed 6 years ago by 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.

comment:3 Changed 6 years ago by rdworth

  • Milestone changed from 1.7 to 1.8

comment:4 follow-up: ↓ 15 Changed 5 years ago by 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; }

comment:5 Changed 5 years ago by vrtxf

thanks alot nonplus, really great fix for starters.

comment:6 Changed 5 years ago by nirvanaforu

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

comment:7 follow-up: ↓ 8 Changed 5 years ago by kbwood

See also #5014.

comment:8 in reply to: ↑ 7 ; follow-up: ↓ 9 Changed 5 years ago by 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

comment:9 in reply to: ↑ 8 Changed 5 years ago by fdemmer

... would have been nice.

comment:10 Changed 4 years ago by 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.

comment:11 Changed 4 years ago by 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

Last edited 4 years ago by steptom (previous) (diff)

comment:12 Changed 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Version changed from 1.6rc5 to 1.8.7
  • Resolution set to fixed

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 4 years ago by 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!

comment:14 in reply to: ↑ 13 Changed 4 years ago by scott.gonzalez

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 in reply to: ↑ 4 Changed 2 years ago by kolak

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

comment:16 Changed 2 years ago by mikesherov

#6042 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.