Bộ công cụ kiểm soát AJAX tự động hoàn tất xuất hiện phía sau cửa sổ bật lên phương thức

Question

Tôi gặp sự cố với AutoCompleteExtender bên trong Bộ công cụ kiểm soát AJAX mà tôi dường như không thể truy cập vào cuối. Điều khiển nằm bên trong một asp: Panel liên kết với một ModalPopupExtender từ bộ công cụ. Tất cả mọi thứ hoạt động tốt đẹp trong các thế hệ mới nhất của IE9, FF và Opera nhưng ổn định trong Safari và Chrome (giả sử đó là WebKit liên quan).

Các trục trặc là thả xuống từ autocomplete đang giảm đằng sau các phương thức popup chứ không phải ở phía trước của nó (tên mờ vì lý do riêng tư):

Nhìn vào mọi thứ trong Firebug , đây là danh sách thả xuống kết xuất trong một danh sách có thứ tự:

<ul id="EmployeeAutoCompleteExtender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; "> 

lớp autoCompleteList trông như thế này:

.autoCompleteList 
{ 
    list-style: none outside none; 
    border: 1px solid buttonshadow; 
    cursor: default; 
    padding: 0px; 
    margin: 0px; 
} 

Và div kết quả cho các phương thức popup trông như thế này:

<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; "> 

Với lớp modalPopup CSS sau:

.modalPopup 
{ 
    background-color: White; 
    padding: 10px; 
    width: 462px; 
} 

giả định của tôi là z-index thấp hơn trên danh sách đang gây ra nó rơi đằng sau div nhưng sau đó một lần nữa, nó chơi tốt đẹp trong các trình duyệt không phải WebKit. Các chỉ mục z cũng là kiểu nội tuyến nên chúng rõ ràng đến thẳng từ các điều khiển. Am i thiếu cái gì ở đây? Bất kỳ đề xuất? (ngoài việc bỏ WebForms và AJAX và sử dụng jQuery)

Answer 1

Thấy bạn nghi ngờ z-index gây ra vấn đề, điều gì sẽ xảy ra nếu bạn thử và ghi đè các kiểu nội tuyến được Bộ công cụ kiểm soát Ajax trích xuất bằng cách sử dụng !important?

.autoCompleteList { 
    list-style: none outside none; 
    border: 1px solid buttonshadow; 
    cursor: default; 
    padding: 0px; 
    margin: 0px; 
    z-index:2000 !important; 
} 

.modalPopup { 
    background-color: White; 
    padding: 10px; 
    width: 462px; 
    z-index:1000 !important; 
} 

Tôi biết đó là một chút khó khăn nhưng nếu bạn chưa thử nhưng nó có thể đáng để bắn?

Answer 2

Ian, tôi gặp sự cố tương tự với cửa sổ bật lên phương thức và một số bộ mở rộng chú thích. Chú thích luôn ở dưới cửa sổ bật lên. Tôi hạ chỉ số z của phương thức với quan trọng và poof. Bắt đầu làm việc. Cảm ơn nhiều vì gợi ý.

Answer 3

Tôi đã gặp phải vấn đề tương tự.

Mã của tôi đang chạy khá tốt trong mozilla. nhưng nó không hoạt động trên Safari và Chrome.

Bây giờ tôi đặt "z-index: 12000! Important;" để tự động hoàn tất lớp, vì cửa sổ bật lên phương thức có giá trị chỉ mục z-10051.