locked
AJAXValidatorCalloutExtender not render CSS properly RRS feed

  • Question

  • User1959525172 posted

    I'm using a ValidatorCalloutExtender on a RequiredFieldValidator and decided to change the style from the default to a more 'Modern UI'. I found a wonderful post http://www.imaginativeuniversal.com/blog/post/2008/09/04/Styling-the-Validator-Callout-Extender.aspx Which helped me get all the relevant CSS fields. I proceeded to change the style and was very happy with the result. I tested in IE, Chrome, and FireFox and it worked perfectly. I then Installed on the production server and noticed the CSS is NOT rendered correctly, no matter which browser I use.

    Rendered Differently

    I have included my CSS below (Just incase I've done something wrong).

    /* AjaxControlToolkit Validator */
    .validatorCalloutHighlight 
    {
    	border:solid;
    	border-color: #FFCC00;
        /*background-color: lemonchiffon;*/ 
    }
    .ajax__validatorcallout_popup_table
    {
    	/*;*/
    	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: '';
    	;
    	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 
    {
    
    }

    The ASP code is below

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

    I even went so far as to alter the web.config with a custom header, which did not resolve my problem. http://stackoverflow.com/questions/1867383/css-renders-differently-on-web-server-than-on-development-environment

    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <clear />
                <add name="X-UA-Compatible" value="IE=Edge" />
            </customHeaders>
      </httpProtocol>
    </system.webServer>

    I would very much like to use the new style and feel that like it is only something small I've overlooked, but I'm out of ideas on how to resolve this. Could anybody please assist with this frustrating problem?

    Wednesday, January 21, 2015 5:48 AM

Answers

  • User1959525172 posted

    I can't seem to get the validator popup to position above the associated textbox on the production server (positions perfectly in my development environment). I'm not going to waste any more time of lose any more sleep over it. I repositioned the triangle and it still looks pretty swish.

    Final CSS Included below

    /* AjaxControlToolkit Validator */
    .validatorCalloutHighlight 
    {
    	border:solid;
    	border-color: #FFCC00;
        /*background-color: lemonchiffon;*/ 
    }
    .CustomValidator
    {
    	;
    	/*margin-left: -80px;*/
    	/*left:-200px;*/
    }
    .CustomValidator div
    {
    	border: none;
    	background-color: #FFCC00;
    	;
    	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
    {
    	;
    	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: '';
    	;
    	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;
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 2, 2015 4:04 AM

All replies

  • User-271186128 posted

    Hi Hornwood509,

    As for this issue, I suggest you could use F12 Developer Tools to debug the HTML and CSS style. Then change the CSS style.

    Here is an article about debugging HTML and CSS with the Developer Tools, please refer to it.

    https://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx

    You need to use IE brower inorder to activate the Developer tools on pressing F12.

    Best Regards,
    Dillion

    Thursday, January 22, 2015 3:42 AM
  • User1959525172 posted

    Hi Dillon

    I did inspect the validator using the F12 Developer tools and it looks like the CSS I associated with it is being ignored (struck out)

    Could it be something in IIS causing this? It just does not make sense that it works perfectly locally, but not on the server. It's the same code.

    Thursday, January 22, 2015 7:29 AM
  • User1959525172 posted

    I ripped up the CSS, trying to see if anything I change make any difference, it didn't. Nothing I tried could removethe default LemonChiffon notification... until I found this post hidden away on the interwebz. http://amityug.org/wordpress/ziems/2014/12/19/how-to-re-position-the-asp-net-ajax-validatorcalloutextender/. I don't know who wrote that entry, but I thank you for taking the time to write and post it!

    Specifically, the CSS contained to completely override the default css applied to the ValidatorCalloutExtender.

    .CustomValidator {;margin-left:-80px;}    
    .CustomValidator div {border:solid 1px Black;background-color:LemonChiffon; ;}    
    .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;;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;}    

    This will give you a 'clean slate' to style the ValidatorCalloutExtender however you like.

    The above screenshot is the result of my style painstakingly infused into with the 'clean slate' CSS.

    I am however having trouble repositioning the popup above the textbox. None of the 'position' options seems to make any difference. I'll include my CSS below, maybe somebody can spot where I've gone wrong and can point me in the right direction. I'll keep playing and post the final CSS if and when it is working.

    .CustomValidator
    {
    	;
    	margin-left: -80px;
    	left:-200px;
    }
    
    .CustomValidator div
    {
    border: none:
    background-color: #FFCC00;
    ;
    color:black;
    }
    
    .CustomValidator td
    {
    	border: none;
    	background-color: #FFCC00;
    	color:black;
    	padding: 20px;
    }
    .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
    {
    
    ;
    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:275px;
    min-height:40px;
    padding: 10px 0px 0px 20px;
    border-right: none;
    border-left: none;
    width: 100%;
    font-size: medium;
    }
    
    
    .CustomValidator .ajax__validatorcallout_error_message_cell:after
    {
    	content: '';
    	;
    	border-style: solid;
    	border-width: 20px 20px 0 0;
    	border-color: #FFCC00 transparent transparent transparent;
    	display: block;
    	width: 0;
    	bottom: -20px;
    	/*right:40px;*/
    	left: 15px;
    }
    
    .CustomValidator .ajax__validatorcallout_icon_cell
    {
    width: 20px;
    padding: 5px;
    border-right: none;
    display:none;
    }
    
    .CustomValidator .ajax__validatorcallout_close_button_cell
    {
    vertical-align: top;
    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;
    }
    
    body
    {
    }

    Monday, January 26, 2015 8:49 AM
  • User1959525172 posted

    I can't seem to get the validator popup to position above the associated textbox on the production server (positions perfectly in my development environment). I'm not going to waste any more time of lose any more sleep over it. I repositioned the triangle and it still looks pretty swish.

    Final CSS Included below

    /* AjaxControlToolkit Validator */
    .validatorCalloutHighlight 
    {
    	border:solid;
    	border-color: #FFCC00;
        /*background-color: lemonchiffon;*/ 
    }
    .CustomValidator
    {
    	;
    	/*margin-left: -80px;*/
    	/*left:-200px;*/
    }
    .CustomValidator div
    {
    	border: none;
    	background-color: #FFCC00;
    	;
    	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
    {
    	;
    	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: '';
    	;
    	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;
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 2, 2015 4:04 AM