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.

Answer 3

That doesn't look transparent to me, it looks like it's rendering "behind" the other elements. Do you have a "z-index" specified for any items?

Answer 4

I had a similar issue which I fixed with z index on fieldsets

If you have

<fieldset> some content... including ajax popup </fieldset>
<fieldset> some more content </fieldset>

then the ajax popup pops up underneath the second fieldset, to fix set the z-index on the first fieldset to be higher than the one on the second, ie as below.

<fieldset style="z-index: 2;"> some content... including ajax popup </fieldset>
<fieldset style="z-index: 1;"> some more content </fieldset> 

Answer 5

The only way I found to solve this problem was to write some css rules for the calendarExtender. It worked for me. The code is below:

https://gist.github.com/carlosmr12/5825371

Answer 6

If those answers does not work properly it might be a problem with hiding overflow. This can be solved using following css:

.ajax__scroll_none {
    overflow: visible !important;
    z-index: 10000 !important;
}