Correcting AJAX Calendar Extender Popup Calendar Position

Posted: August 16, 2012 in .Net, AJAX, CSS, JavaScript, Web
Tags: , , , , ,

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.

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.

image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s