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.

I'm experiencing the same problem. On a regular web form the calendar pops up with the correct background. On a subform that's popped up like a dialog the calendar is transparent. I've tried every suggestion listed here and none of them fixed my problem. Anyone have any additional suggestions? My css: .MyCalendar .ajax__calendar_container { border: 1px solid #646464; background-color: #D3DEEF; color: #003366; overflow: visible !important; position: absolute; visibility: visible; display: block; z-index : 10000; } — CoolBreeze, Feb 07 '18 at 15:27

score 26 · Accepted Answer · answered Nov 20 '08 at 19:48

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.

For me `.ajax__calendar_container { z-index : 1000 ; }` didn't work. But `.ajax__calendar { z-index : 5000 ; }` did work! Thanks. — Matt Roy, Dec 05 '13 at 18:47

score 3 · Answer 2 · answered Feb 12 '13 at 13:11

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.

score 0 · Answer 3 · answered Jun 20 '13 at 18:37

0

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

answered Jun 20 '13 at 18:37

Carlos Rodrigues

63
6

score 0 · Answer 4 · answered Nov 19 '08 at 15:31

0

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?

answered Nov 19 '08 at 15:31

kͩeͣmͮpͥ ͩ

7,783
26
40

No Z-Index specified in the layout, but I'm wondering if maybe there's something to the render order on the page that would affect it? If I put a Z-Index in, should I do it on the calendar, or the div tags below to move it back? – Dillie-O Nov 19 '08 at 15:34
Hard to say without looking at the HTML and poking about with the calendarextend. I'd probably use FireBug to play about and see what works. – kͩeͣmͮpͥ ͩ Nov 19 '08 at 15:59
I added the first line to my css file and works terrific – ranobe Jan 31 '23 at 13:22

score 0 · Answer 5 · answered Jul 05 '17 at 10:46

0

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

answered Jul 05 '17 at 10:46

Gregor Primar

6,759
2
33
46

score 0 · Answer 6 · answered May 14 '09 at 22:51

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>

Why is my CalendarExtender getting overlapped when rendered?

6 Answers6

Linked