Cómo volver a colocar asp.net ajax ValidatorCalloutExtender

Question

Estoy usando el ValidatorCalloutExtender que se encuentra en AjaxControlToolkit versión 3.0.20299.9. La validación se produce en una ventana del navegador que tiene un tamaño ajustable = 0 establecido. La caja emergente se posiciona principalmente fuera de la ventana visible, a la derecha.

Se había colocado correctamente con AjaxControlToolkit versión 1.0.10618.0. De hecho flotó sobre el cuadro de texto con el derecho de la ventana emergente justo dentro del lado derecho de la ventana visible con un margen de aproximadamente 5px. Como hemos actualizado las versiones de AjaxControlToolkit, parece que se procesa de manera diferente. ¿Alguien sabe lo que debo hacer para que la ventana emergente se coloque correctamente? He estado jugando con las clases .ajax__validatorcallout_ * css, pero todo lo que cambio parece estropear la pantalla.

Answer 1

Me di cuenta de esto. Pensé en publicar una respuesta para cualquier persona interesada. La representación es diferente entre las dos versiones de AjaxControlToolkit. Para reubicar la ventana de ValidatorCallout encontré que lo siguiente funcionaba mejor.

Tiene que anular todas las clases .ajax__validatorcallout_ * css que genera el kit de herramientas con sus propios estilos personalizados. Es extraño, pero parece que debes anular cada estilo para que funcione correctamente. Utilicé la barra de herramientas de desarrollo web de firefox para descubrir los estilos que se estaban generando y luego los superé de la siguiente manera.

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

Nota: He añadido la primera .CustomValidator {position: relative; margin-left: -80px;} línea a las clases que se generaron. También estallé .CustomValidator div, .CustomValidator td para poder agregar la posición: relative; al div y no al td. El margen izquierdo: -80px es lo que necesitaba para cambiar todo lo que quedaba.

A continuación, sólo se adhieren al CustomValidator CssClass en su ValidatorCalloutExtender:

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

Answer 2

¿Esto sucede en todos los navegadores? IE6 es conocido por problemas de procesamiento y recomiendo usar algo más. IE7, FF, Safari, cualquier cosa menos IE6.

¿Está el validador colocado dentro de un div externo? Compruebe el CSS del div externo.