How do I get the CalendarExtender to show over a dropdown?

I've read some of the posts that cover this topic and solve it with IFRAME but that involves mouseover or click events of a div. The CalendarExtender provides a convenient PopupButtonID attribute to display the calendar by clicking an image. How do I get the calendar to show over the dropdown below it when I click the calendar image next to textbox?

Below is the aspx markup followed by snippet of styles. Any help would be appreciated.

/* CSS File */

#date { position: absolute; top: 2em; left: 1.4em; }
#date input { width: 7em; }
#timeofday { position: absolute; top: 4em; left: 1.4em; }

Re: How do I get the CalendarExtender to show over a dropdown?

The following page works fine for me in IE7 and IE6. What about you? If it breaks, what browser are you using?

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Sample Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:TextBox ID="TB" runat="server" />
        <ajaxToolkit:CalendarExtender ID="C" runat="server" TargetControlID="TB" />
        <br />
        <asp:DropDownList runat="server">
            <asp:ListItem Text="Item" />
        </asp:DropDownList>
    </form>
</body>
</html>

Re: How do I get the CalendarExtender to show over a dropdown?

The code you wrote works great except that I needed to register the System.Web.Extensions. When I wrapped the textbox and dropdown in divs the calendar appears behind the dropdown. Applying css and adjusting the z-index fixed the issue. I tried adjusting the z-index before posting but I must have had an old css file stuck in my browser cache. Below is the working code. Remove the z-index from both sytles to see the calendar go behind the dropdown.

Thanks.

<%@ Page Language="C#" %>


<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Sample Page</title>
    <style>
        #div1
        {
            position: absolute;
            top: 6em;
            left: 3em;
            z-index: 101;
        }
        #div2
        {
            position: absolute;
            top: 8em;
            left: 4em;
            z-index: 100;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div id="div1">
            <asp:TextBox ID="TB" runat="server" />
            <ajaxToolkit:CalendarExtender ID="C" runat="server" TargetControlID="TB" />
            <br />
        </div>
        <div id="div2">
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem Text="Item" />
            </asp:DropDownList>
        </div>
    </form>
</body>
</html>

Re: How do I get the CalendarExtender to show over a dropdown?

Thank you for the demonstration!

As it happens, once you start modifying the position style of things (done here with position:absolute), you take them out of the usual z-index process and bump them way up. So in this case, as soon as you absolutely position div2, you raise it above the Calendar and start hitting problems. Read more here if you're interested: http://www.w3.org/TR/CSS21/visuren.html#q29 and http://www.w3.org/TR/CSS21/zindex.html.

So because Calendar seems to work correctly under the normal HTML/CSS behavior as you confirmed above, I'm inclined to say that this is not a bug with Calendar, but rather a consequence of how CSS rules are applied.

Re: How do I get the CalendarExtender to show over a dropdown?

Seeing as how this issue has come up for some other folks as well, I'm wondering if we should do something like add a ZIndex property to CalendarExtender so that people get better control of where their Calendar sits in the CSS z-index stack...

Re: How do I get the CalendarExtender to show over a dropdown?

If it is merely a z-index issue you can try the following:

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

We are still working on the documentation for the CSS rules that can be used to redefine Calendar and Tabs. They use nested CSS class selectors to scope their layout. The calendar's "container" div tag is the highest styleable element, so you can update the default CSS class by adding a .ajax__calendar_container rule to either the head tag or to a linked stylesheet.

[ FYI: the CSS class name specifically is: ajax(underscore)(underscore)calendar(underscore)container ]

Ron

Re: How do I get the CalendarExtender to show over a dropdown?

In my browser (version 6.0.2900.2180.xpsp_sp2_gdr.050301-1519) none of the examples work properly.

I thought there was a movement afoot to use an iframe or something.

Byron

Re: How do I get the CalendarExtender to show over a dropdown?

rbuckton

If it is merely a z-index issue you can try the following:
<style type="text/css">
.ajax__calendar_container { z-index : 1000 ; }
</style>
We are still working on the documentation for the CSS rules that can be used to redefine Calendar and Tabs. They use nested CSS class selectors to scope their layout. The calendar's "container" div tag is the highest styleable element, so you can update the default CSS class by adding a .ajax__calendar_container rule to either the head tag or to a linked stylesheet.

[ FYI: the CSS class name specifically is: ajax(underscore)(underscore)calendar(underscore)container ]

Ron

I am having a similar issue with the ValidatorCalloutExtender. I posted about it here: http://forums.asp.net/thread/1589043.aspx

If you can adjust the style of the calendar container as demonstrated above, can you do the same to the ValidatorCalloutExtender?

Re: How do I get the CalendarExtender to show over a dropdown?

Funny - i tried putting that exact same page in my site and it doesn't display in IE6 properly...not sure why.

Byron

David Anson

The following page works fine for me in IE7 and IE6. What about you? If it breaks, what browser are you using?

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Sample Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:TextBox ID="TB" runat="server" />
        <ajaxToolkit:CalendarExtender ID="C" runat="server" TargetControlID="TB" />
        <br />
        <asp:DropDownList runat="server">
            <asp:ListItem Text="Item" />
        </asp:DropDownList>
    </form>
</body>
</html>

Re: How do I get the CalendarExtender to show over a dropdown?

FYI from just-updated work item 7759:

A demonstration of the problem reported by this owrk item can be found in attached file Default7.aspx (courtesy http://forums.asp.net/thread/1550925.aspx).

My initial investigation led me to write:

"As it happens, once you start modifying the position style of things (done here with position:absolute), you take them out of the usual z-index process and bump them way up. So in this case, as soon as you absolutely position div2, you raise it above the Calendar and start hitting problems. Read more here if you're interested: http://www.w3.org/TR/CSS21/visuren.html#q29 and http://www.w3.org/TR/CSS21/zindex.html.

The Calendar author's suggestion for how to work around this on affected sites (also from http://forums.asp.net/thread/1550925.aspx) is to add the following to the page in order to give a z-index style to the Calendar and break out of the CSS situation I describe above:

This suggestion is valid CSS and works in most browsers. Unfortunately, it does not work in IE6/7 - an explanation of the reason why can be found at http://www.aplus.co.yu/lab/z-pos/. Basically, IE6/7 get the CSS rules wrong here and so the only apparant workaround for IE6/7 seems to be to add a z-index style to the Calendar's parent element instead. This is not something Calendar can safely do in general, so it's left to the page author to do so as necessary. The attached file contains both workarounds (commented-out) for demonstration purposes. We will add a "known issue" to the sample page.

Re: How do I get the CalendarExtender to show over a dropdown?

OK!!! This may have been corrected for comboboxes in the March 07 release, but is still occurring when the CalendarExtender is enclosed within another "bordered" control; ie: a grid whose size is delimited by a panel control. Maybe its me, but it seems to me that a Calendar control such as this should ALWAYS have the top most x-index. Btw, using IE7, applying the z-index within .ajax__calendar_container has no effect whatsoever!!! In order to make this control useful, MS really needs to think about adding some additional properties like being able to set the z order or visibility persistence, so at least user can scroll through the grid to make the calendar visible.

Re: How do I get the CalendarExtender to show over a dropdown?

Last released didn't fix it for me. I still have the same problems displaying the calendar in a panel enclosed FormView. I don't get why the workitem is removed everytime stating it's fixed, cause it's not. There's a lot of documentation around about this problem: IE6 always renders select boxes on top of allmost all of the other components. The only way to fix this is rendering an iframe above the selectbox (one of the few controls which are rendered above a selectbox) and rendering the calendar above that (since it has no problem rendering above an iframe). This is done with the z-index property.

For more info: http://support.microsoft.com/kb/177378. Note that only the select box is listed as a windowed element. Thats exactly why this behaviour only occurs in IE6 and not in FF (not sure about IE7); FF's render engine doesn't render select elements above the rest of the page.

Re: How do I get the CalendarExtender to show over a dropdown?

After installing the latest release I also noticed that I was still seeing calendars being displayed underneath select boxes. After looking into this issue I noticed that the iframe wasn't being positioned correctly when the calendar was inside a container that had been positioned relative or absolute.

I added the following to my main stylesheet to position the iframe correctly for the above situation.

.ajax__calendar {
    position: relative;
}
.ajax__calendar iframe {
    left: 0px !important;
    top: 0px !important;
}

Note: I have not tested this under any other conditions.

Hopefully this helps.

Re: How do I get the CalendarExtender to show over a dropdown?

That didn't do it. For some reason the iframe is rendered after the select boxes and therefore doesn't work properly. I've been trying some css properties on the calendar and iframe class, but I can't get the iframe to display properly where I want it to.

Re: How do I get the CalendarExtender to show over a dropdown?

Fixed it! The IFRAME is rendered as a new element in the parent node of the textbox; therefore it is placed after all the other elements, rendering in the wrong spot. This is easily fixed by surrounding the input and calendarextender with a DIV. Now the position is still wrong and the frame isn't begin displayed correctly. Adding the following code to your stylesheet should fix that:

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

For me this works fine in both IE and FF, but I can imagine it depends on the structure of your site. But with all the tips above I think the problem can be solved in 9/10 times.

Re: How do I get the CalendarExtender to show over a dropdown?

I have a CalendarControl inside a modalPopup and in order to get the calendar to popup over top of my modalPopup I had to set the Z-Index to a really high number such as

.ajax__calendar_container { z-index : 100003 ; }

this works in both IE 6 and FF for me...setting the z-index to only 1000 wont work well b/c the modal popup and the modalPopup background use z-index 1000 and 1001...setting the z-index to 1003 worked fine in IE6 but FF required the much high z-index to work for some unknown reason, but none the less...I got it to work with the above CSS code.

Hope that helps,

Greg

--
GregBenoit.com
PrecisionSoftware.Net
QGenda.com
StaffKeeper.com

Re: How do I get the CalendarExtender to show over a dropdown?

jaspersiegmund

Fixed it! The IFRAME is rendered as a new element in the parent node of the textbox; therefore it is placed after all the other elements, rendering in the wrong spot. This is easily fixed by surrounding the input and calendarextender with a DIV. Now the position is still wrong and the frame isn't begin displayed correctly. Adding the following code to your stylesheet should fix that:

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

For me this works fine in both IE and FF, but I can imagine it depends on the structure of your site. But with all the tips above I think the problem can be solved in 9/10 times.

The above worked for me, but now there is a noticable lag between when the image is clicked (i am using an image to popup the calendar) and when the calendar actually appears, and between when the date is selected and when it appears in the box, functional, but annoying

Re: How do I get the CalendarExtender to show over a dropdown?

madrak

The above worked for me, but now there is a noticable lag between when the image is clicked (i am using an image to popup the calendar) and when the calendar actually appears, and between when the date is selected and when it appears in the box, functional, but annoying

If ever there was an argument for deleting a post, this is it. The lag is there regardless, i just hadn't specifically noticed it before, the lag seems much worse in IE than in FF, so when i switched to ie i noticed the popunder problem more than the lag, but once i fixed the popunder problem, i noticed the lag

Re: How do I get the CalendarExtender to show over a dropdown?

OK. For all tose for whom the various above soplutions did not work, I have run into anotehr coningency which apparently affect CalendarEntendar visability.

In may legacy applications there may be instances where a pages <!DOCTYPE> will be marked as HTML4.0:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

In such cases. You migh try changing this to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Of course, while this will affect your layout which may require a fair amount of adjustment, it seems to do the trick.

Re: How do I get the CalendarExtender to show over a dropdown?

Sorry! reposting due to numerous unedited typos ...

OK. For all those for whom the various above solutions did not work, I have run into another contingency which apparently affect CalendarExtender visibility.

In may legacy applications there may be instances where a pages <!DOCTYPE> will be marked as HTML4.0:

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

In such cases. You might try changing this to:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Of course, while this will affect your layout which may require a fair amount of adjustment, it seems to do the trick.