#7649 open bug ()

Opened August 17, 2011 10:05PM UTC

Last modified July 14, 2014 06:26PM UTC

Datepicker: Picker not in viewable position when the control is in far right side with horizontal scroll bar in IE7/8

Reported by: xihuazhang Owned by:
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.8.15
Keywords: rewrite position Cc:
Blocked by: Blocking:
Description

The follow is the test case:

<html>
<head><title>jQuery date picker</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css" type="text/css"/>
 
</head>
<body>
<form>
<br/><br/><br/><br/><br/><br/><br/><br/>
<table><tr>
<td>
<input id="date1" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date2" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date3" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date4" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date5" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date6" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date7" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date8" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date9" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date10" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date11" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date12" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date13" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date14" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date15" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date16" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date17" type="textbox" class='date_picker'/>
</td>
<td>
<input id="date18" type="textbox" class='date_picker'/>
</td>
</tr></table>
</form>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".date_picker").datepicker({ showOn: 'button', buttonText: "select" });
});
</script>

</body>
</html>
Attachments (0)
Change History (6)

Changed August 26, 2011 03:44AM UTC by mikesherov comment:1

_comment0: There is bug in _checkOffset: function(inst, offset, isFixed) in jquery-ui.js \ \ var viewWidth = document.documentElement.clientWidth + $(document).scrollLeft(); \ var viewHeight = document.documentElement.clientHeight + $(document).scrollTop(); \ \ document.documentElement.clientWidth and document.documentElement.clientHeight return \ wrong value in IE 7 and IE 8 \ \ Should use $(window).width() and $(window).height() instead → 1350673764151540

There is bug in _checkOffset: function(inst, offset, isFixed) in jquery-ui.js

var viewWidth = document.documentElement.clientWidth + $(document).scrollLeft();
var viewHeight = document.documentElement.clientHeight + $(document).scrollTop();

document.documentElement.clientWidth and document.documentElement.clientHeight return

wrong value in IE 7 and IE 8. Should be

var viewWidth = $(window).width() + $(document).scrollLeft();
var viewHeight = $(window).height() + $(document).scrollTop();

Changed October 11, 2012 02:43PM UTC by scottgonzalez comment:2

milestone: 1.9.0 → 1.11.0

Changed October 19, 2012 07:08PM UTC by mikesherov comment:3

description: The follow is the test case: \ \ <html> \ <head><title>jQuery date picker</title> \ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css" type="text/css"/> \ \ </head> \ <body> \ <form> \ <br/><br/><br/><br/><br/><br/><br/><br/> \ <table><tr> \ <td> \ <input id="date1" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date2" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date3" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date4" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date5" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date6" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date7" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date8" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date9" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date10" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date11" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date12" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date13" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date14" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date15" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date16" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date17" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date18" type="textbox" class='date_picker'/> \ </td> \ </tr></table> \ </form> \ \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script> \ <script type="text/javascript"> \ $(document).ready(function(){ \ $(".date_picker").datepicker({ showOn: 'button', buttonText: "select" }); \ }); \ </script> \ \ </body> \ </html> → The follow is the test case: \ {{{ \ <html> \ <head><title>jQuery date picker</title> \ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css" type="text/css"/> \ \ </head> \ <body> \ <form> \ <br/><br/><br/><br/><br/><br/><br/><br/> \ <table><tr> \ <td> \ <input id="date1" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date2" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date3" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date4" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date5" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date6" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date7" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date8" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date9" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date10" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date11" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date12" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date13" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date14" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date15" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date16" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date17" type="textbox" class='date_picker'/> \ </td> \ <td> \ <input id="date18" type="textbox" class='date_picker'/> \ </td> \ </tr></table> \ </form> \ \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script> \ <script type="text/javascript"> \ $(document).ready(function(){ \ $(".date_picker").datepicker({ showOn: 'button', buttonText: "select" }); \ }); \ </script> \ \ </body> \ </html> \ }}}
keywords: → haspatch
status: new → open

Changed December 06, 2012 04:26PM UTC by tj.vantoll comment:4

_comment0: Still an issue in master, test case - http://jsfiddle.net/tj_vantoll/7zURB/1/. This is another one that will likely be fixed with the switch to use {{{position}}}. → 1354811349560916
summary: Date Picker pop up not showed in viewable position when the control is in far right side with horizontal scroll bar in IE8 → Datepicker: Picker not in viewable position when the control is in far right side with horizontal scroll bar in IE7/8

Still an issue in master, test case - http://jsfiddle.net/tj_vantoll/7zURB/. This is another one that will likely be fixed with the switch to use 

position
.

Changed June 24, 2014 11:52PM UTC by scottgonzalez comment:5

milestone: 1.11.0 → none

Changed July 14, 2014 06:26PM UTC by scottgonzalez comment:6

keywords: haspatch → rewrite position