Ajax CalendarExtender displaying at wrong position in google chrome - asp.net

Question

I am using CalendarExtender control which is assign text box,CalendarExtender fine below the text box for all,but my problem is I have a text box bottom of the page,so need to scroll down and select the text box.
Here is my problem when I scroll and select the text box my calendar is showing some where above screen,not at all correct position.
I change the resolution to avoid scrolling, than it is fine. But my page need compulsory scrolling.
Please any one give me the solution
This is only happens in google chrome.

Answer 1

I found this solution:
Create a new Div with its position set to relative (style="position:relative;")
The Div must contain the textbox and the extender
hope this work for you

Answer 2

Set PopupPosition Property of CalendarExtender for set the position of CalendarExtender.
You Can select Popup Position any of following for CalendarExtender.
PopupPosition=” BottomLeft”
PopupPosition=” BottomRight”
PopupPosition=” Left”
PopupPosition=” Right”
PopupPosition=” TopLeft”
PopupPosition=” TopRight”

Answer 3

I made a function to avoid this, just add:
<script type="text/javascript" language="javascript">
function onCalendarShown(calendar) {
var top = $("#" + calendar._element.id).offset().top + $("#" + calendar._element.id).height() + 5;
$("#" + calendar._container.id).css({ 'top': (top + 'px') });
}
</script>
and add the property OnClientShown="onCalendarShown" in your CalendarExtender.

Answer 4

There is a PopupPosition property which Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox. Assign your textbox TopLeft or TopRight position.
<ajaxToolkit:Calendar runat="server"
TargetControlID="Date1"
CssClass="ClassName"
Format="MMMM d, yyyy"
PopupButtonID="Image1" PopupPosition="Give your desired position" />

Answer 5

Probably a little late for the original poster but the following has two suggestions, the latter of which worked for me:
Calendar Extender Problem

Answer 6

Since this is an old post, I thought my solution to the same issue might be relevant to others.
We where using an outdated version: 3.0.xxx
We had to upgrade to latest version: 4.1.xxx
Above versions is the AjaxControlToolkit dll version - not the version you see on NuGet, today the NuGet package ("Ajax Control Toolkit") will be something like 7.xxx.
FYI - My research: I've been using the samples of latest AjaxControlToolkit version to verify if my bug was solved if I upgraded (since I knew exactly how to reproduce my position-issue). At least one of the two sites below should work:
http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/ (official - slower)
http://www.ajaxcontroltoolkit.com/ (independent - faster)

Answer 7

Simply put the following code into your page
<style type="text/css" rel="stylesheet">
.ajax__calendar {
position : absolute;
}
</style>

Answer 8

The best way to solve this issue is just add an ajax assembly to your page, on the top:
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
And don't forget to add the tagprefix on the calender extender as "ajaxToolkit". If it's something else:
ex:
<ajaxToolkit:CalendarExtender ID="txtPostingDate_CalendarExtender"
runat="server" Enabled="True" TargetControlID="txtPostingDate"
Format="MM/dd/yyyy">
</ajaxToolkit:CalendarExtender>