AJAX Control Toolkit si completa automaticamente dietro il popup modale

Question

Ho un problema con AutoCompleteExtender all'interno dell'AJAX Control Toolkit che non riesco proprio ad arrivare in fondo. Il controllo si trova all'interno di un asp: pannello collegato a un oggetto ModalPopupExtender dal toolkit. Tutto funziona magnificamente nelle ultime generazioni di IE9, FF e Opera, ma glitch in Safari e Chrome (supponendo che sia correlato a WebKit).

Il problema tecnico è che la discesa dal completamento automatico è in calo dietro il popup modale piuttosto che di fronte ad essa (nomi offuscata per motivi di privacy):

guardare le cose in Firebug , ecco la discesa reso in una lista non ordinata:

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

la classe autoCompleteList assomiglia a questo:

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

E il div risultante per il popup modale si presenta così:

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

Con la seguente classe modalPopup CSS:

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

La mia ipotesi è che il più basso z-index sulla la lista sta facendo sì che cada dietro al div, ma poi di nuovo, funziona bene nei browser non WebKit. Gli z-index sono anche inline, quindi ovviamente provengono direttamente dai controlli. Mi sto perdendo qualcosa qui? Eventuali suggerimenti? (oltre ad abbandonare WebForms e AJAX e utilizzare jQuery)

Answer 1

Vedendo come si sospetta che sia lo z-index a causare il problema, cosa succede se si tenta di ignorare gli stili inline sparsi dal Ajax Control Toolkit utilizzando !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; 
} 

so che è un po 'di un hack, ma se non l'avete ancora provato forse vale la pena un colpo?

Answer 2

Ian, stavo avendo un problema simile con un popup modale e diversi estensioni callout. Il callout era sempre sotto il popup. Ho abbassato lo z-index del modal con! Important e poof. Ha iniziato a lavorare. Grazie mille per il suggerimento.

Answer 3

Ho incontrato lo stesso problema.

Il mio codice funzionava abbastanza bene in mozilla. ma non funzionava su Safari e Chrome.

Ora ho impostato "z-index: 12000! Important;" per completare automaticamente la classe, poiché il popup modale ha il valore z-index 10051.