How to re-position the asp.net ajax ValidatorCalloutExtender

Question

I'm using the ValidatorCalloutExtender found in AjaxControlToolkit version 3.0.20299.9. The validation is occuring in a browser window that has resizable=0 set. The popout box is getting positioned mostly outside of the viewable window - off to the right.

It had positioned correctly with AjaxControlToolkit version 1.0.10618.0. It actually floated over the textbox with the right of the popout just inside the right side of the viewable window with a margin of about 5px. Since we've upgraded versions of the AjaxControlToolkit it seems to render differently. Does anyone know what I need to do to get the popout to position correctly? I've been playing around with the .ajax__validatorcallout_* css classes, but everything I change seems to really screw up the display.

Answer 1

Does this happen in all browsers? IE6 is known for rendering issues and I highly recommend using something else. IE7, FF, Safari, anything but IE6.

Is the validator placed within an outer div? Check the CSS of the outer div.

Answer 2

I figured this one out. Thought I'd post an answer for anyone interested. The rendering is different between the two versions of AjaxControlToolkit. In order to reposition the ValidatorCallout window I found the following to work best.

You have to override all of the .ajax__validatorcallout_* css classes that the toolkit generates with your own custom styles. It's odd, but it seems that you have to override each style in order to get it to work properly. I used firefox web dev toolbar to discover the styles that were being generated and then I overrode them as follows.

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

Note: I added the first .CustomValidator {position:relative;margin-left:-80px;} line to the classes that were generated. I also broke out the .CustomValidator div, .CustomValidator td so that I could add the position:relative; to the div and not the td. The margin-left:-80px is what I needed to shift everything left.

Then just stick the CustomValidator CssClass into your ValidatorCalloutExtender:

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

Answer 3

Excellent work! Thanks! (has some IE 6 issues)