Skip to main content

Search and Top Navigation

#5585 closed bug (duplicate)

Opened May 05, 2010 05:01PM UTC

Closed October 17, 2012 04:40AM UTC

Last modified October 08, 2013 12:00AM UTC

Datepicker Position Problem in IE 8

Reported by: iratherscribble Owned by:
Priority: major Milestone: 1.11.0
Component: ui.datepicker Version: 1.8
Keywords: Cc:
Blocked by: Blocking:
Description

With an input at the bottom-left of the viewport and you click on it, the datepicker opens below, outside of the view. Scrollbar appears, but when you go to scroll, the datepicker is dismissed and the scrollbar disappears. In this case, there is no way to use the datepicker. Change script references to 1.7.2 and datepicker appears above the input and works as expected. This was a problem previously in ticket 3232. Regression in 1.8.

Attachments (2)
Change History (6)

Changed June 23, 2010 03:59PM UTC by mikesherov comment:1

_comment0: i had the same problem. \ \ I fixed it like in the patch for ticket 3232. \ \ So at line 8387 change your code with \ \ //2010/06/23 fix position in ie8 \ //old \ //var viewWidth = document.documentElement.clientWidth + $(document).scrollLeft(); \ //var viewHeight = document.documentElement.clientHeight + $(document).scrollTop(); \ // \ var browserWidth = (window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth); \ var browserHeight = (window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight); \ var viewWidth = browserWidth + $(document).scrollLeft(); \ var viewHeight = browserHeight + $(document).scrollTop(); \ \ //end fix1350448681976663

i had the same problem.

I fixed it like in the patch for ticket 3232.

So at line 8387 change your code with

//2010/06/23 fix position in ie8
//old
//var viewWidth = document.documentElement.clientWidth + $(document).scrollLeft();
//var viewHeight = document.documentElement.clientHeight + $(document).scrollTop();
//
var browserWidth = (window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth); 
var browserHeight = (window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight); 
var viewWidth = browserWidth + $(document).scrollLeft();
var viewHeight = browserHeight + $(document).scrollTop();

//end fix

Changed October 26, 2010 03:07PM UTC by scottgonzalez comment:2

Datepicker should use the position plugin.

Changed October 11, 2012 09:04PM UTC by scottgonzalez comment:3

milestone: TBD1.11.0

Changed October 17, 2012 04:40AM UTC by mikesherov comment:4

resolution: → duplicate
status: newclosed

Duplicate of #4348.

Changed October 07, 2013 11:52PM UTC by randjc comment:5

_comment0: @mikesherov - This needs to be re-opened, as this is still an issue with IE8 on version 1.10.3. \ //JQuery workaround for IE \ $(".ui-datepicker-trigger").on("click", function() { \ var self; \ \ if (navigator.userAgent.match(/msie/i)) { \ var scrollTopValue = document.body.scrollTop || window.pageYOffset \ || (document.body.parentElement \ ?document.body.parentElement.scrollTop: \ $(window).scrollTop()); \ self = $(this); \ $("#ui-datepicker-div").hide(); \ setTimeout(function(){ \ $("#ui-datepicker-div").css({ \ top: self.offset().top + scrollTopValue + 25 \ }); \ $("#ui-datepicker-div").show(); \ }, 0); \ } \ }); 1381190106759469
_comment1: @mikesherov - This needs to be re-opened, as this is still an issue with IE8 on version 1.10.3 \ \ \ --JQuery workaround for IE \ $(".ui-datepicker-trigger").on("click", function() { \ var self; \ \ if (navigator.userAgent.match(/msie/i)) { \ var scrollTopValue = document.body.scrollTop || window.pageYOffset \ || (document.body.parentElement \ ?document.body.parentElement.scrollTop: \ $(window).scrollTop()); \ self = $(this); \ $("#ui-datepicker-div").hide(); \ setTimeout(function(){ \ $("#ui-datepicker-div").css({ \ top: self.offset().top + scrollTopValue + 25 \ }); \ $("#ui-datepicker-div").show(); \ }, 0); \ } \ }); 1381190118734889
_comment2: @mikesherov - This needs to be re-opened, as this is still an issue with IE8 on version 1.10.3 \ \ \ --JQuery workaround for IE \ \ \ $(".ui-datepicker-trigger").on("click", function() { \ var self; \ \ if (navigator.userAgent.match(/msie/i)) { \ var scrollTopValue = document.body.scrollTop || window.pageYOffset \ || (document.body.parentElement \ ?document.body.parentElement.scrollTop: \ $(window).scrollTop()); \ self = $(this); \ $("#ui-datepicker-div").hide(); \ setTimeout(function(){ \ $("#ui-datepicker-div").css({ \ top: self.offset().top + scrollTopValue + 25 \ }); \ $("#ui-datepicker-div").show(); \ }, 0); \ } \ }); 1381190140633301
_comment3: @mikesherov - This needs to be re-opened, as this is still an issue with IE8 on version 1.10.3 \ \ \ --JQuery workaround for IE \ \ \ {{{ \ \ $(".ui-datepicker-trigger").on("click", function() { \ var self; \ \ if (navigator.userAgent.match(/msie/i)) { \ var scrollTopValue = document.body.scrollTop || window.pageYOffset \ || (document.body.parentElement \ ?document.body.parentElement.scrollTop: \ $(window).scrollTop()); \ self = $(this); \ $("#ui-datepicker-div").hide(); \ setTimeout(function(){ \ $("#ui-datepicker-div").css({ \ top: self.offset().top + scrollTopValue + 25 \ }); \ $("#ui-datepicker-div").show(); \ }, 0); \ } \ }); \ }}} \ 1381190463195898

@mikesherov - This needs to be re-opened, as this is still an issue with IE8 on version 1.10.3

Changed October 08, 2013 12:00AM UTC by scottgonzalez comment:6

Replying to [comment:5 randjc]:

@mikesherov - This needs to be re-opened, as this is still an issue with IE8 on version 1.10.3

The milestone for this ticket is 1.11.0, which means that it *should* still be broken in 1.10.3. If you are still having problems with the master branch, let us know.