Wie man den asp.net ajax ValidatorCalloutExtender neu positioniert

Question

Ich verwende den ValidatorCalloutExtender aus dem AjaxControlToolkit Version 3.0.20299.9. Die Validierung erfolgt in einem Browser-Fenster, das resizable=0 gesetzt hat. Das Popout-Feld wird meist außerhalb des sichtbaren Fensters positioniert - nach rechts weg.

Mit AjaxControlToolkit Version 1.0.10618.0 hatte es sich korrekt positioniert. Es schwebte tatsächlich über dem Textfeld mit der rechten Seite des Popouts gerade innerhalb der rechten Seite des sichtbaren Fensters mit einem Rand von etwa 5px. Seit wir die Versionen des AjaxControlToolkits aktualisiert haben, scheint es anders zu laufen. Weiß jemand, was ich tun muss, um das Popout richtig zu positionieren? Ich habe mit den .ajax__validatorcallout_* css-Klassen herumgespielt, aber alles, was ich ändere, scheint die Anzeige wirklich zu vermasseln.

Answer 1

Ich habe das hier herausgefunden. Ich dachte, ich poste mal eine Antwort für alle Interessierten. Das Rendering ist zwischen den beiden Versionen von AjaxControlToolkit unterschiedlich. Um das ValidatorCallout-Fenster neu zu positionieren, habe ich folgendes gefunden, das am besten funktioniert.

Sie müssen alle .ajax__validatorcallout_* css-Klassen, die das Toolkit erzeugt, mit Ihren eigenen benutzerdefinierten Stilen überschreiben. Es ist seltsam, aber es scheint, dass Sie jeden Stil überschreiben müssen, um es richtig zu arbeiten. Ich habe Firefox Web Dev Toolbar verwendet, um die Stile zu entdecken, die generiert wurden, und dann habe ich sie wie folgt überschrieben.

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

Hinweis: Ich habe die erste Zeile .CustomValidator {position:relative;margin-left:-80px;} zu den generierten Klassen hinzugefügt. Ich brach auch die .CustomValidator div, .CustomValidator td aus, so dass ich die Position:relative; zum div und nicht zum td hinzufügen konnte. Die margin-left:-80px ist, was ich brauchte, um alles nach links zu verschieben.

Dann stecken Sie einfach die CustomValidator CssClass in Ihre ValidatorCalloutExtender:

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

Answer 2

Tritt dieses Problem in allen Browsern auf? Der IE6 ist bekannt für Rendering-Probleme und ich empfehle dringend, einen anderen Browser zu verwenden. IE7, FF, Safari, alles außer IE6.

Befindet sich der Validator innerhalb eines äußeren Div? Prüfen Sie das CSS des äußeren Divs.