Cách định vị lại asp.net ajax ValidatorCalloutExtender

Question

Tôi đang sử dụng ValidatorCalloutExtender được tìm thấy trong phiên bản AjaxControlToolkit 3.0.20299.9. Việc xác thực xảy ra trong cửa sổ trình duyệt có kích thước = 0 được đặt. Hộp cửa sổ bật lên đang được định vị chủ yếu bên ngoài cửa sổ có thể xem - ở bên phải.

Đã định vị chính xác với phiên bản AjaxControlToolkit 1.0.10618.0. Nó thực sự trôi nổi trên hộp văn bản với bên phải của cửa sổ bật lên ngay bên phải của cửa sổ có thể xem với lề khoảng 5px. Vì chúng tôi đã nâng cấp các phiên bản của AjaxControlToolkit, nó dường như hiển thị khác nhau. Có ai biết những gì tôi cần làm để đưa cửa sổ bật lên đến vị trí chính xác không? Tôi đã chơi đùa với các lớp .ajax__validatorcallout_ * css, nhưng mọi thứ tôi thay đổi dường như thực sự làm hỏng màn hình.

Answer 1

Tôi đã tìm ra điều này. Nghĩ rằng tôi sẽ đăng một câu trả lời cho bất cứ ai quan tâm. Kết xuất khác nhau giữa hai phiên bản của AjaxControlToolkit. Để đặt lại vị trí cửa sổ ValidatorCallout, tôi đã tìm thấy phần sau để hoạt động tốt nhất.

Bạn phải ghi đè tất cả các lớp .ajax__validatorcallout_ * css mà bộ công cụ tạo ra với kiểu tùy chỉnh của riêng bạn. Đó là kỳ quặc, nhưng có vẻ như bạn phải ghi đè từng phong cách để làm cho nó hoạt động đúng. Tôi đã sử dụng thanh công cụ web firefox để khám phá các kiểu đã được tạo và sau đó tôi đã khắc phục chúng như sau.

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

Lưu ý: Tôi đã thêm dòng đầu tiên .CustomValidator {position: relative; margin-left: -80px;} vào các lớp được tạo. Tôi cũng đã phá vỡ .CustomValidator div, .CustomValidator td để tôi có thể thêm vị trí: tương đối; cho div và không phải là td. Lề bên trái: -80px là thứ tôi cần để chuyển mọi thứ sang trái.

Sau đó chỉ cần dính vào các CustomValidator CssClass vào ValidatorCalloutExtender của bạn:

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

Answer 2

Điều này có xảy ra ở tất cả các trình duyệt không? IE6 được biết đến với các vấn đề dựng hình và tôi khuyên bạn nên sử dụng một cái gì đó khác. IE7, FF, Safari, mọi thứ trừ IE6.

Trình xác thực có được đặt trong div ngoài không? Kiểm tra CSS của div bên ngoài.