【问题标题】:ValidatorCalloutExtender not render CSS properlyValidatorCalloutExtender 无法正确呈现 CSS
【发布时间】:2015-03-21 00:04:21
【问题描述】:

我在RequiredFieldValidator 上使用ValidatorCalloutExtender 并决定将样式从默认更改为更“现代的UI”。我找到了一个Wonderful Post,它帮助我获得了所有相关的 CSS 字段。我开始改变风格,对结果非常满意。我在 IE、Chrome 和 FireFox 中进行了测试,效果很好。然后我在生产服务器上安装并注意到 CSS 没有正确呈现,无论我使用哪种浏览器。

http://s14.postimg.org/gn5kjgovl/Rendered_Differently.png 示例图片

我在下面包含了我的 CSS(以防我做错了什么)。

/* AjaxControlToolkit Validator */
.validatorCalloutHighlight 
{
	border:solid;
	border-color: #FFCC00;
    /*background-color: lemonchiffon;*/ 
}
.ajax__validatorcallout_popup_table
{
	/*position:absolute;*/
	min-width: 350px;
	min-height: 40px;
	/*padding: 8px;*/
	background: #FFCC00;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	margin-left:250px;
	margin-top:-20px;
	color:black;
}
.ajax__validatorcallout_popup_table:after
{
	content: '';
	position:absolute;
	border-style: solid;
	border-width: 20px 20px 0 0;
	border-color: #FFCC00 transparent transparent transparent;
	display: block;
	width: 0;
	bottom: -20px;
	left: 0px;
}
/* The popup table row */
.ajax__validatorcallout_popup_table_row
{

}
/* The callout cell */
.ajax__validatorcallout_callout_cell
{

}
/* The table in the callout cell */
.ajax__validatorcallout_callout_table
{

}
/* The callout table row */
.ajax__validatorcallout_callout_table_row
{

}
/* The error message cell */
.ajax__validatorcallout_error_message_cell
{

}
/* The warning icon cell */
.validator_callout .ajax__validatorcallout_icon_cell
{
	padding:0px;
}
.validator_callout .ajax__validatorcallout_icon_cell img
{
	/* Remove the 'Warning' icon */
	display: none;
}
/* The close button cell */
.ajax__validatorcallout_close_button_cell
{

}
/* The arrow cell */
.ajax__validatorcallout_arrow_cell
{
	display:none;
}
/* Inner div of a cell. Used in the close button */
.ajax__validatorcallout_innerdiv 
{

}

ASP 代码如下

<asp:TextBox ID="txtUsername" runat="server" Width="300px"></asp:TextBox>
                                    <asp:RequiredFieldValidator CssClass="validator_callout" ID="reqvalUsername" runat="server" ControlToValidate="txtUsername" Display="None" ErrorMessage="Enter a new login name" ValidationGroup="Submit">*</asp:RequiredFieldValidator>
                                    <cc1:ValidatorCalloutExtender ID="reqvalUsername_ValidatorCalloutExtender" runat="server" CloseImageUrl="~/Images/Buttons/cancel_Validator.png" HighlightCssClass="validatorCalloutHighlight" TargetControlID="reqvalUsername" PopupPosition="TopRight" WarningIconImageUrl="~/Images/Status/clear.png">
                                    </cc1:ValidatorCalloutExtender>

我什至用自定义标题更改了 web.config,但这并没有解决我的问题。 CSS renders differently on web server than on development environment

我非常想使用新样式,感觉它只是我忽略的小东西,但我不知道如何解决这个问题。有人可以帮忙解决这个令人沮丧的问题吗?

【问题讨论】:

    标签: css asp.net ajaxcontroltoolkit


    【解决方案1】:

    向上 CSS,尝试查看我所做的任何更改是否有任何影响,但没有。我尝试过的任何方法都无法删除默认的 LemonChiffon 通知……直到我发现这篇文章隐藏在 interwebz 上。 http://amityug.org/wordpress/ziems/2014/12/19/how-to-re-position-the-asp-net-ajax-validatorcalloutextender/。我不知道该条目是谁写的,但我感谢你抽出时间来写和发布它!

    具体来说,包含的 CSS 完全覆盖了应用于 ValidatorCalloutExtender 的默认 css。

    .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;}    
    

    包含我的验证器样式的最终结果

    /* AjaxControlToolkit Validator */
    .validatorCalloutHighlight 
    {
        border:solid;
        border-color: #FFCC00;
        /*background-color: lemonchiffon;*/ 
    }
    .CustomValidator
    {
        position: absolute;
        /*margin-left: -80px;*/
        /*left:-200px;*/
    }
    .CustomValidator div
    {
        border: none;
        background-color: #FFCC00;
        position: relative;
        color:black;
    }
    .CustomValidator td
    {
        border: none;
        background-color: #FFCC00;
        color:black;
    }
    .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
    {
        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;
        border: none;
        background-color: transparent;
    }
    
    .CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv
    {
        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
    {
        min-width:200px;
        max-width:275px;
        min-height:40px;
        padding: 10px 5px 10px 20px;
        border-right: none;
        border-left: none;
        width: 100%;
        font-size: medium;
    }
    
    
    .CustomValidator .ajax__validatorcallout_error_message_cell:after
    {
        content: '';
        position:absolute;
        border-style: solid;
        border-width: 0px 20px 20px 0px;
        border-color: transparent #FFCC00 transparent transparent;
        display: block;
        width: 0;
        top:0px;
    /*  bottom:55px;*/
        left: -5px;
    }
    
    .CustomValidator .ajax__validatorcallout_icon_cell
    {
        width: 20px;
        padding: 5px;
        border-right: none;
        display:none;
    }
    
    .CustomValidator .ajax__validatorcallout_close_button_cell
    {
        vertical-align: top;
        padding-top: 7px;
        padding-right:30px;
        text-align: right;
    }
    
    .CustomValidator .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv
    {
        border: none;
        text-align: center;
        width: 10px;
        padding: 2px;
        cursor: pointer;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-12-17
      • 2020-01-16
      • 1970-01-01
      • 1970-01-01
      • 2011-05-19
      • 2011-12-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多