Tuesday, July 21, 2009

Tip - solve DateTimeControl's datepickerframe positioning fault for IE8

The SharePoint DateTimeControl uses clientside javascript to runtime position the datepickerframe nearby the imagebutton. When browsing via IE8, the frame is however positioned incorrect, at a visually unrelated position.

I inspected the SharePoint datepicker.js client library from the 12hive\layouts folder to locate the cause of this. At first I had the impression that it was due to the usage of dynamic properties (pixelTop, pixelLeft, pixelRight). As of IE8, DynamicProperties are namely no longer supported to comply with CSS standards.
The real cause however is the usage of the offsetParent method to calculcate the display position for the popped-up datepickerframe. It appears that IE8 returns another value for this method than earlier IE versions for hidden objects: they all return the document.body object as their offsetParent. This causes the pickerdateframe to be displayed at an unexpected place.

A quick fix is to force the browser in IE7 emulation mode in the HTML header:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

A more elegant fix is correctly position the frame by circumventing the offsetParent malfunctioning. I solved the problem by runtime extending the standard 'clickDatePicker' method, and so make sure that for IE8 the datepickerframe.style.display is unequeal 'none' upon requesting it's offsetParent.

1 comment:

  1. This is a fix I have been looking for.
    Can you tell me how to add this in a SharePoint page layout?

    ReplyDelete