Why is my CalendarExtender getting overlapped when rendered?

Question

I'm working on a .NET web application and I'm using a CalendarExtender control within it to have the user specify a date. For some reason, when I click the icon to display the calendar, the background seems to be transparent.

I'm using the extender on other pages and do not run into this issue.

I'm not sure if it is worth mentioning, but the calendar is nested within a panel that has a rounded corner extender attached to it, as well as the panel below it (where the "From" is overlapping).

Within that panel, I do have a div layout setup to create two columns.

EDIT: The other thing to note here is that the section that has the name and "placeholders" for nickname are all ASP.NET label controls, if that matters.

Answer 1

So some more poking around and I figured out the issue. Part of the problem arises from the fact that the div layout I setup to create two separate columns is using the position:relative and float:right/left attributes.

From what I've read, as soon as you start augmenting the position attribute of a div tag, it affects the z-index of the rendering, which only gets complicated when the calendar control is "popping up" dynamically.

Unfortunately there is no Z-Index attribute to the CalendarExtender, unless you want to write an entire style for the calendar, which I don't want to do. However, you can extend the default style by adding the following to your CSS file:

.ajax__calendar_container { z-index : 1000 ; }

If you aren't using a CSS file, you can also add this into the head section of your page:

<style type="text/css">
   .ajax__calendar_container { z-index : 1000 ; }
</style>

and that should do the trick. It worked for me.

If for some reason this doesn't work (and some people were still reporting problems), a little more "aggressive" approach was to wrap the input fields and CalendarExtender in a DIV tag and then add the following to your CSS file / HEAD section:

.ajax__calendar {
    position: relative;
    left: 0px !important;
    top: 0px !important;
    visibility: visible; display: block;
}
.ajax__calendar iframe
{
    left: 0px !important;
    top: 0px !important;
}

...and hopefully that will work for you.

Answer 2

The only way i have found to resolve the issue in IE7 was to add some extra CSS to the page i was having problems with. No amount of z-indexing or div wrapping and re-styling was having an effect.

The following changes the controls stacking context.

.ajax__calendar_container
{
    position:static;
}

This does result in the calendar popup appearing vertically above the extender control instead of vertically below as normal. For me that was acceptable.