Comment repositionner asp.net ajax ValidatorCalloutExtender

Question

J'utilise le ValidatorCalloutExtender trouvé dans AjaxControlToolkit version 3.0.20299.9. La validation se produit dans une fenêtre de navigateur qui a redimensionnable = 0 ensemble. La boîte à boutons se positionne la plupart du temps en dehors de la fenêtre visible, vers la droite.

Il s'était positionné correctement avec AjaxControlToolkit version 1.0.10618.0. En fait, il flottait sur la zone de texte avec le droit de l'image juste à l'intérieur du côté droit de la fenêtre visible avec une marge d'environ 5px. Comme nous avons mis à jour les versions de AjaxControlToolkit, il semble que le rendu soit différent. Est-ce que quelqu'un sait ce que je dois faire pour obtenir la position correcte? J'ai joué avec les classes .ajax__validatorcallout_ * css, mais tout ce que je change semble vraiment bousiller l'affichage.

Answer 1

J'ai compris celui-ci. Je pensais poster une réponse pour toute personne intéressée. Le rendu est différent entre les deux versions d'AjaxControlToolkit. Afin de repositionner la fenêtre ValidatorCallout, j'ai trouvé ce qui suit pour mieux fonctionner.

Vous devez remplacer toutes les classes .ajax__validatorcallout_ * css que la boîte à outils génère avec vos propres styles personnalisés. C'est étrange, mais il semble que vous deviez remplacer chaque style afin de le faire fonctionner correctement. J'ai utilisé la barre d'outils firefox web dev pour découvrir les styles qui étaient générés et ensuite je les ai remplacés comme suit.

<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: J'ai ajouté la première .CustomValidator {position: relative; margin-left: -80px;} ligne aux classes qui ont été générés. J'ai également éclaté le div .CustomValidator, .CustomValidator td afin que je puisse ajouter la position: relative; à la div et pas le td. La marge gauche: -80px est ce dont j'avais besoin pour tout décaler.

Ensuite il suffit de coller le CustomValidator CssClass dans votre ValidatorCalloutExtender:

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

Answer 2

Est-ce que cela se produit dans tous les navigateurs? IE6 est connu pour les problèmes de rendu et je recommande fortement d'utiliser autre chose. IE7, FF, Safari, tout sauf IE6.

Le validateur est-il placé dans un div externe? Vérifiez le CSS de la div externe.