Calendar extender popup opens in wrong location in zoomed Chrome window on Android

Question

User-157013242 posted

Note: This bug has been also reported on the DevExpress GitHub for AjaxControlToolkit, where someone identified that the root cause of the problem is in the getLocation() method of the Ajax library.  Re-posting here to find out if there's a way to get that fixed.

https://github.com/DevExpress/AjaxControlToolkit/issues/285

Steps to reproduce bug:

1. Using Chrome on Android, open the web page for the demo of the AJAX Control Toolkit Calendar extender: https://ajaxcontroltoolkit.devexpress.com/Calendar/Calendar.aspx

2. Zoom the window to anything greater than 100% (e.g. 110%)

3. Click the calendar button to open the popup

Expected behavior: Popup should open adjacent and aligned to the bottom of the input field (or the top if there is no visual room).

Actual behavior: Popup opens in location down and to the right of the associated input field, at a distance relative to the zoom level.

Analysis: [Credit to MikhailTymchukDX on DevExpress forum] Its root cause is the calculation of the element location. The calendar script uses the Popup script, which in turn uses the getLocation() method from the Microsoft Ajax library. If you check lines 4281 and 4282, you'll see that the bodyElement.scrollLeft and bodyElement.scrollTop properties are used:

offsetX = Math.round(clientRect.left) + (documentElement.scrollLeft || bodyElement.scrollLeft),
offsetY = Math.round(clientRect.top) + (documentElement.scrollTop || bodyElement.scrollTop);

These non-zero values cause a popup displacement when the browser is zoomed.

Workaround: A temporary workaround to this problem was identified over at Stack Overflow: http://stackoverflow.com/questions/12085123/ajax-calendarextender-displaying-at-wrong-position-in-google-chrome

They inserted a DIV around both the Calendar extender and the associated input field, and applied a "" style to the DIV. We confirmed this workaround does correct the problem, but may have other side effects that we're unaware of, and would prefer that someone identify and address the actual root cause.

One additional note: The problem with the popup opening in the wrong location only seems to appear in Chrome on Android. However, all browsers seem to have difficulty maintaining the alignment of the popup to the field when the browser is zoomed while the popup is open. Applying the aforementioned workaround actually also resolves this behavior, seeming to keep the popup properly aligned with the field in all browsers, even when someone zooms the browser window while the popup is open.

Answer 1

User-707554951 posted

Hi Grand Avenue Software,

From your description, I am not clear about your problem?

It seems that you have given a work round to solve your problem, is it?

Best regards

Cathy

Answer 2

User-157013242 posted

Cathy,

There is a defect in the Ajax getLocation() code.  We'd like it fixed, because it impacts the Popup used by the AjaxControlToolkit Calendar Extender.

The AjaxControlToolkit team can't fix the bug because it's in Ajax, not their library.  And they can't avoid the bug, because to do so would require them to implement their own version of Popup.

There is a potential workaround, but it can't be used by the AjaxControlToolkit team because it requires wrapping both the Calendar Extender and its corresponding input field into a single DIV, which is a requirement that wouldn't be acceptable to many of the toolkit users/applications.

We could potentially apply the workaround to our application, but it would require redesigning our UI, and potentially introducing unexpected side-effects from wrapping sections of the DOM hierarchy in that relative-position DIV.

So that's why I posted this request, asking if someone could investigate actually fixing the underlying problem in Ajax.

Thanks.

Jim