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

Answer 1

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 2

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;
}

Answer 3

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 4

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 5

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 6

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