AJAX Calendar Control and Drop Lists

Working on a web app, and we're using the AJAX Toolkit's Calendar control for selecting a date.

I have a few drop down lists on the screen, but whenever I click the Cal control (which displays overtop of the drop lists), the drop lists appear on top of it...until the month is changed, and then it displays properly. I remember running into this sort of thing with DDL's earlier in my adventures with asp.net, and I remembered z-index settings to be the solution. Not so in this case.

I came accross Scott Guthrie's blog while researching a fix, and Dave Bacher posted a great comment to help explain what's going on (should be noted that I'm testing this on IE 6, not 7):

"FYI on z-Index and drop down lists (also known as select elements)...

z-Index in Internet Explorer 6 and prior is broken for owner-draw controls.  For Ie 6, you have to use workarounds for owner-draw controls.

Anyway, you need an IFrame between any owner-draw content and any DHTML content that you are trying to draw on top of it.  The IFrame is (itself) owner-draw, and so it modifies the paint region appropriately.  Then the content on top is drawn in z-Index order, and so everything works out.

The catch is, this doesn't work when the owner-draw control repaints itself.  For drop down list (specifically) monitoring scrollTop and forcing a repaint of the IFrame and whatever is over it is enough, but that might not be the case for other cases (for example, it wouldn't be for Media Player).

IE 7 has this mostly fixed.  It passes a bitmap in most cases.  There are still some cases where it has to let the owner draw itself for performance reason.

As a general rule, best to design pages to avoid it."

Hopefully this issue is fixed without the need of using a floating iFrame or some other hack...in the meantime, I might just look to move the controls around so that the overlay isn't an issue.

D