diff options
| author | Ca-Phun Ung <pazu2k@gmail.com> | 2009-01-04 15:13:01 +0000 |
|---|---|---|
| committer | Ca-Phun Ung <pazu2k@gmail.com> | 2009-01-04 15:13:01 +0000 |
| commit | acbe714b53fd483bfe902ec1b4850046f2be173b (patch) | |
| tree | 850f2c8a1b10ea7dd89fbad80a4f28453dc3598f | |
| parent | edc6f634dc1ba76251e07e65bb364d1a77cba1e5 (diff) | |
| download | jquery-ui-acbe714b53fd483bfe902ec1b4850046f2be173b.tar.gz jquery-ui-acbe714b53fd483bfe902ec1b4850046f2be173b.zip | |
datepicker: Fixes regression in #3232 [datepicker position problem in IE 6/7]: added back functionality to detect whether the datepicker displays outside a viewpoint. Additionally if the viewpoint is too small to fit the datepicker it will show in its usual position regardless. I have also added a visual test case for this.
| -rw-r--r-- | tests/visual/datepicker.html | 10 | ||||
| -rw-r--r-- | ui/ui.datepicker.js | 18 |
2 files changed, 24 insertions, 4 deletions
diff --git a/tests/visual/datepicker.html b/tests/visual/datepicker.html index c755423b6..6126398e3 100644 --- a/tests/visual/datepicker.html +++ b/tests/visual/datepicker.html @@ -56,7 +56,9 @@ // disabled input datepicker $('#d3').datepicker(); - + + // bottom-right datepicker + $('#d4').datepicker({numberOfMonths: 3}); }); </script> </head> @@ -96,6 +98,12 @@ <div> <input type="text" id="d3" disabled="disabled" /> </div> + </li> + <li class="plugin" style="position: absolute; right: 0; bottom: 0; height: 40px"> + Datepicker - positioned bottom-right + <div> + <input type="text" id="d4"> + </div> </li> </ul> diff --git a/ui/ui.datepicker.js b/ui/ui.datepicker.js index 1c4ffbc19..c50a606b9 100644 --- a/ui/ui.datepicker.js +++ b/ui/ui.datepicker.js @@ -608,10 +608,22 @@ $.extend(Datepicker.prototype, { }, /* Check positioning to remain on screen. */ - _checkOffset: function(inst, offset, isFixed) { - offset.left -= (this._get(inst, 'isRTL') ? (inst.dpDiv.outerWidth() - inst.input.outerWidth()) : 0); + _checkOffset: function(inst, offset, isFixed) { + var dpWidth = inst.dpDiv.outerWidth(); + var dpHeight = inst.dpDiv.outerHeight(); + var inputWidth = inst.input ? inst.input.outerWidth() : 0; + var inputHeight = inst.input ? inst.input.outerHeight() : 0; + var viewWidth = window.innerWidth || document.documentElement.clientWidth; + var viewHeight = window.innerHeight || document.documentElement.clientHeight; + + offset.left -= (this._get(inst, 'isRTL') ? (dpWidth - inputWidth) : 0); offset.left -= (isFixed && offset.left == inst.input.offset().left) ? $(document).scrollLeft() : 0; - offset.top -= (isFixed && offset.top == (inst.input.offset().top + inst.input.outerHeight())) ? $(document).scrollTop() : 0; + offset.top -= (isFixed && offset.top == (inst.input.offset().top + inputHeight)) ? $(document).scrollTop() : 0; + + // now check if datepicker is showing outside window viewpoint - move to a better place if so. + offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0; + offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0; + return offset; }, |