Correcting AJAX Calendar Extender Popup Calendar Position

Recently I encountered a positioning error in AJAX calendar extender. When I use the calendar extender inside of other container controls the popup calendar started appearing few inches above the button. You will be able to get an idea of the problem by the following image.

Since I couldn’t get it fixed by changing the properties I thought to find a solution for this.

One way to correct this is by applying a CSS style sheet to change the calendar positioning manually. I found this method while searching the web. This way since you need to enter the location of the calendar you need to try several times to get the correct positioning. If you are using this method simply place the following CSS style in your page and apply the style as shown. Remember you need to change the value to suit your form.

1. <style type="text/css">
2.     .fromDtPos
3.     {
4.         left: 245px !important;
5.     }
6. </style>

Apply the style to your calendar extender.

1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" cssclass="ajax__calendar fromDtPos">
3. </cc2:calendarextender>

My preferred way to do this is by using the JavaScript that I wrote below. Since you do not need to enter the position manually this will be easier. Also this code will work irrespective of the number of parent containers it is having above of the control.

Insert the below JavaScript into your page.

1. <script type="text/javascript" language="javascript">
2.     function showCalendar(sender, args) {
3.         var processingControl = $get(sender._button.id); // Getting the control which triggered the calendar.
4.         sender._popupDiv.parentElement.style.top = processingControl.offsetTop + processingControl.height + 'px';
5.         sender._popupDiv.parentElement.style.left = processingControl.offsetLeft + 'px';
6.  
7.         var positionTop = processingControl.height + processingControl.offsetTop;
8.         var positionLeft = processingControl.offsetLeft;
9.         var processingParent;
10.         var continueLoop = false;
11.  
12.         do {
13.             // If the control has parents continue loop.
14.             if (processingControl.offsetParent != null) {
15.                 processingParent = processingControl.offsetParent;
16.                 positionTop += processingParent.offsetTop;
17.                 positionLeft += processingParent.offsetLeft;
18.                 processingControl = processingParent;
19.                 continueLoop = true;
20.             }
21.             else {
22.                 continueLoop = false;
23.             }
24.         } while (continueLoop);
25.  
26.         sender._popupDiv.parentElement.style.top = positionTop + 'px';
27.         sender._popupDiv.parentElement.style.left = positionLeft + 'px';
28.     }
29. </script>

Then call the function showCalendar on onClientShown event of the calendar extender as seen below.

1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" onclientshown="showCalendar">
3. </cc2:calendarextender>

Both of the above methods will correct the appearance of the popup calendar of the AJAX Calendar Extender as seen below.