运维开发网

如何重新定位asp.net ajax ValidatorCalloutExtender

运维开发网 https://www.qedev.com 2020-04-29 18:48 出处:网络 作者:运维开发网整理
我正在使用AjaxControlToolkit 3.0.20299.9中的ValidatorCalloutExtender.验证发生在已设置resizable = 0的浏览器窗口中.弹出框大部分位于可视窗口之外 – 向右移动. 它已经与AjaxControlToolkit版本1.0.10618.0正确定位.它实际上漂浮在文本框上,弹出窗口右侧位于可视窗口的右侧,边距约为5px.由于我们已经升级了A
我正在使用AjaxControlToolkit 3.0.20299.9中的ValidatorCalloutExtender.验证发生在已设置resizable = 0的浏览器窗口中.弹出框大部分位于可视窗口之外 – 向右移动.

它已经与AjaxControlToolkit版本1.0.10618.0正确定位.它实际上漂浮在文本框上,弹出窗口右侧位于可视窗口的右侧,边距约为5px.由于我们已经升级了AjaxControlToolkit的版本,因此它的呈现方式似乎不同.有谁知道我需要做什么才能让popout正确定位?我一直在玩.ajax__validatorcallout_ * css类,但我改变的一切似乎真的搞砸了显示器.

我想出了这一个.以为我会为有兴趣的人发布答案.两个版本的AjaxControlToolkit之间的呈现是不同的.为了重新定位ValidatorCallout窗口,我发现以下内容最佳.

您必须覆盖工具包使用您自己的自定义样式生成的所有.ajax__validatorcallout_ * css类.这很奇怪,但似乎你必须覆盖每种风格才能使其正常工作.我使用firefox web开发工具栏来发现正在生成的样式,然后我按如下方式覆盖它们.

<style>

.CustomValidator {position:relative;margin-left:-80px;}

.CustomValidator div {border:solid 1px Black;background-color:LemonChiffon; position:relative;}

.CustomValidator td {border:solid 1px Black;background-color:LemonChiffon;}

.CustomValidator .ajax__validatorcallout_popup_table {display:none;border:none;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_popup_table_row {vertical-align:top;height:100%;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_cell {width:20px;height:100%;text-align:right;vertical-align:top;border:none;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_table {height:100%;border:none;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_table_row {background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell {padding:8px 0px 0px 0px;text-align:right;vertical-align:top;font-size:1px;border:none;background-color:transparent;}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv {font-size:1px;position:relative;left:1px;border-bottom:none;border-right:none;border-left:none;width:15px;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div {height:1px;overflow:hidden;border-top:none;border-bottom:none;border-right:none;padding:0px;margin-left:auto;}

.CustomValidator .ajax__validatorcallout_error_message_cell {font-family:Verdana;font-size:10px;padding:5px;border-right:none;border-left:none;width:100%;}

.CustomValidator .ajax__validatorcallout_icon_cell {width:20px;padding:5px;border-right:none;}

.CustomValidator .ajax__validatorcallout_close_button_cell {vertical-align:top;padding:0px;text-align:right;border-left:none;}

.CustomValidator .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv {border:none;text-align:center;width:10px;padding:2px;cursor:pointer;}

</style>

注意:我将第一个.CustomValidator {position:relative; margin-left:-80px;}行添加到生成的类中.我还打破了.CustomValidator div,.CustomValidator td,这样我就可以添加位置:relative;到div而不是td.左边距:-80px是我需要将所有东西都移开的东西.

然后将CustomValidator CssClass粘贴到ValidatorCalloutExtender中:

<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="MyValidatorControl" CssClass="CustomValidator">

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号