Jak zmienić pozycję asp.net ajax ValidatorCalloutExtender

Question

Używam ValidatorCalloutExtender znaleźć w AjaxControlToolkit wersji 3.0.20299.9. Sprawdzanie poprawności odbywa się w oknie przeglądarki z ustawionym resizable = 0. Wyskakujące okienko jest pozycjonowane głównie poza widocznym oknem - z prawej strony.

Ustawił się poprawnie z AjaxControlToolkit w wersji 1.0.10618.0. Przesunął się on nad polem tekstowym z prawej strony okna znajdującego się po prawej stronie widocznego okna z marginesem około 5 pikseli. Ponieważ zaktualizowaliśmy wersje AjaxControlToolkit, wydaje się, że renderuje się inaczej. Czy ktoś wie, co muszę zrobić, aby poprawnie ustawić pozycję? Gram z klasami .ajax__validatorcallout_ * css, ale wszystko, co zmieniam, wydaje się zepsuć ekran.

Answer 1

Wymyśliłem to. Pomyślałem, że zamieszczę odpowiedź dla wszystkich zainteresowanych. Renderowanie różni się między dwiema wersjami AjaxControlToolkit. Aby zmienić położenie okna ValidatorCallout, znalazłem następujące, aby działało najlepiej.

Musisz zastąpić wszystkie klasy .ajax__validatorcallout_ * css, które zestaw narzędzi generuje z własnymi stylami niestandardowymi. To dziwne, ale wydaje się, że musisz nadpisać każdy styl, aby działał poprawnie. Użyłem paska narzędziowego dev firefox, aby odkryć style, które były generowane, a następnie przejąłem je w następujący sposób.

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

Uwaga: Po dodaniu pierwszego .CustomValidator {pozycji: względnymi, lewy brzeg: -80px;} linię klasy, które zostały wytworzone. Ponadto wybrałem opcję .CustomValidator div, .CustomValidator td, dzięki czemu mogę dodać pozycję: relative; do div, a nie do td. Margines-lewy: -80px jest tym, czego potrzebowałem, aby przesunąć wszystko w lewo.

Następnie wystarczy nakleić CustomValidator CssClass do swojej ValidatorCalloutExtender:

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

Answer 2

Czy dzieje się to we wszystkich przeglądarkach? IE6 jest znany z renderowania problemów i bardzo polecam użycie czegoś innego. IE7, FF, Safari, wszystko oprócz IE6.

Czy weryfikator znajduje się w zewnętrznej części div? Sprawdź CSS zewnętrznego div.