Why is my CalendarExtender getting overlapped when rendered?

Answer 1

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 2

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 3

Hi there thats 'cause you are using Absolute positioning, is a good way to fix the problem but i prefer documents with CSS, and divs, but the answer ata top is great and work!!!!

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

I've got a little z-index sample to play around with. This will enforce what is happening with positioned elements and z-index settings.

What is z-index?

Answer 6

only need set calendar backcolor white