jQuery datepicker IE6 positioning bug
We’ve been using the jQuery datepicker on my current project and came across some strange behaviour with regards to the positioning of the calendar in IE6.
The calendar was always positioning itself right at the top of the screen instead of just below the textbox it was hooked up to but in Firefox it was working fine.
After a bit of exploration in the jQuery code (ui.datepicker.js) we worked out that the 'document.documentElement.clientHeight' call in the '_checkOffset' function was always returning a value of 0 meaning that the position of the calendar was always right at the top of the screen.
_checkOffset: function(inst, offset, isFixed) {
var pos = inst.input ? this._findPos(inst.input[0]) : null;
var browserWidth = window.innerWidth || document.documentElement.clientWidth;
var browserHeight = window.innerHeight || document.documentElement.clientHeight;
...It turned that we were missing the doctype at the top of the HTML page which make the page standards compliant and as a result document.documentElement.clientHeight returns the proper height.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">Not having this set puts IE into Quirks Mode meaning that document.documentElement.clientHeight always returns 0.
We found a post on the Webmaster World Forum which helps explain why this change makes a difference.
About the author
I'm currently working on short form content at ClickHouse. I publish short 5 minute videos showing how to solve data problems on YouTube @LearnDataWithMark. I previously worked on graph analytics at Neo4j, where I also co-authored the O'Reilly Graph Algorithms Book with Amy Hodler.