Ajax CalendarExtender 在谷歌浏览器中显示在错误的位置答案

【问题标题】：Ajax CalendarExtender displaying at wrong position in google chromeAjax CalendarExtender 在谷歌浏览器中显示在错误的位置
【发布时间】：2012-08-23 05:16:16
【问题描述】：

我正在使用 CalendarExtender 控件，它是分配文本框，CalendarExtender 在所有文本框下方都很好，但我的问题是我在页面底部有一个文本框，所以需要向下滚动并选择文本框。这是我滚动并选择文本框时的问题，我的日历显示在屏幕上方的某个位置，而不是正确的位置。我更改分辨率以避免滚动，这很好。但是我的页面需要强制滚动。

请任何人给我解决方案

这只发生在谷歌浏览器中。

【问题讨论】：

标签： asp.net css asp.net-ajax ajaxcontroltoolkit

【解决方案1】：

我找到了这个解决方案：

创建一个新的Div，其位置设置为relative (style="position:relative;")

Div 必须包含文本框和扩展器

希望这对你有用

【讨论】：

【解决方案2】：

设置CalendarExtender的PopupPosition属性，设置CalendarExtender的位置。

您可以为CalendarExtender 选择以下任何弹出位置。

PopupPosition=” BottomLeft”
PopupPosition=” BottomRight”
PopupPosition=” Left”
PopupPosition=” Right”
PopupPosition=” TopLeft”
PopupPosition=” TopRight”

【讨论】：

【解决方案3】：

我做了一个函数来避免这种情况，只需添加：

<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>

并在您的 CalendarExtender 中添加属性 OnClientShown="onCalendarShown"。

【讨论】：

其中 calendar._element.id 是 Input 元素的 id。

【解决方案4】：

有一个PopupPosition 属性指示日历弹出窗口应出现在BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox 的哪个位置。分配您的文本框 TopLeft 或 TopRight 位置。

<ajaxToolkit:Calendar runat="server"
    TargetControlID="Date1"
    CssClass="ClassName"
    Format="MMMM d, yyyy"
     PopupButtonID="Image1" PopupPosition="Give your desired position"  />

【讨论】：

感谢 Waqar Janjua，但它不起作用。问题是在选择之前，我需要向下滚动，因为我的文本框仅在 google chorme 中位于页面底部
显示快照，以便人们更好地了解您的问题。
HI Waqar Janjua，由于我的声望点较少，我无法发布图片，请给我您的邮件 ID\
上传到任何免费图片上传网站，然后发布图片链接
我看到了，我不知道如何适应它。对不起，我帮不了你。还要编辑您的问题并添加 CSS 标签。因为只有那些擅长设计的人才能帮助你。

【解决方案5】：

原始海报可能有点晚了，但以下有两个建议，后者对我有用：

Calendar Extender Problem

【讨论】：

【解决方案6】：

由于这是一篇旧帖子，我认为我对同一问题的解决方案可能与其他人相关。

我们使用过时的版本：3.0.xxx
我们必须升级到最新版本：4.1.xxx

以上版本是 AjaxControlToolkit dll 版本 - 不是您在 NuGet 上看到的版本，今天 NuGet 包（“Ajax Control Toolkit”）将类似于 7.xxx。

仅供参考 - 我的研究：我一直在使用最新 AjaxControlToolkit 版本的示例来验证如果我升级了我的错误是否得到解决（因为我确切地知道如何重现我的位置问题）。以下两个站点中的至少一个应该可以工作：

http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/（官方 - 较慢）
http://www.ajaxcontroltoolkit.com/（独立 - 更快）

【讨论】：

【解决方案7】：

只需将以下代码放入您的页面中

<style type="text/css" rel="stylesheet">
.ajax__calendar {
 position : absolute;
 }
</style>

【讨论】：

【解决方案8】：

解决此问题的最佳方法是在页面顶部添加一个 ajax 程序集：

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

并且不要忘记在日历扩展器上添加标记前缀为“ajaxToolkit”。如果是别的：

例如：

<ajaxToolkit:CalendarExtender ID="txtPostingDate_CalendarExtender"
runat="server" Enabled="True" TargetControlID="txtPostingDate"
Format="MM/dd/yyyy">
                                            </ajaxToolkit:CalendarExtender>

【讨论】：