AJAX Control Toolkit autocompletado que aparece detrás de la ventana emergente modal

Tengo un problema con el AutoCompleteExtender dentro del AJAX Control Toolkit del que parece que no puedo llegar al fondo. El control se encuentra dentro de un asp: Panel vinculado a un ModalPopupExtender del kit de herramientas. Todo funciona maravillosamente en las últimas generaciones de IE9, FF y Opera, pero fallas técnicas en Safari y Chrome (suponiendo que esté relacionado con WebKit).AJAX Control Toolkit autocompletado que aparece detrás de la ventana emergente modal

El problema técnico es que el menú desplegable de la autocompletar está cayendo detrás la ventana emergente modal en lugar de en frente de ella (nombres borrosos por razones de privacidad):

enter image description here

ver las cosas en Firebug , aquí está el menú desplegable dictada en una lista desordenada:

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

la clase autoCompleteList se parece a esto:

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

Y el div resultante para el emergente modal se parece a esto:

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

Con la siguiente clase de ModalPopup CSS:

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

Mi suposición es que el índice Z inferior a la la lista está causando que se quede atrás del div pero, una vez más, funciona bien en los navegadores que no son WebKit. Los índices z también son estilos en línea, por lo que obviamente provienen directamente de los controles. ¿Me estoy perdiendo de algo? ¿Alguna sugerencia? (Aparte de amaraje WebForms y AJAX y el empleo de jQuery)

Fuente

2011-08-17 Troy Hunt

Lamentablemente, está sentado detrás de un cortafuegos, por lo que no hay ejemplos en vivo a disposición del público. –

En vista de que se sospecha que es el índice z causando el problema, lo que pasa si usted trata de anular los estilos en línea que se escupió a cabo por el Control Toolkit Ajax usando !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; 
}

sé que es un poco de un truco, pero si no se ha probado todavía podría valer la pena un tiro?

Fuente

2011-08-17 09:31:56

¡Bonito! Terminé simplemente bajando "z-index: 100002! Important;" en la clase autoCompleteList y saltó encima de todo lo demás. Hacky, pero feliz :) –

¡Gracias! Tenía la sensación de que era un problema del índice z, pero me estaba perdiendo el! Importante. Eso lo solucionó –

Ian, estaba teniendo un problema similar con un menú emergente modal y varios extensores de llamadas. La llamada siempre estuvo debajo de la ventana emergente. Bajé el índice Z del modal con el! Important y poof. Comenzó a trabajar. Muchas gracias por la sugerencia.

Fuente

2013-02-01 21:25:40

Me he encontrado con el mismo problema.

Mi código funcionaba muy bien en mozilla. pero no estaba funcionando en Safari y Chrome.

Ahora configuro "z-index: 12000! Important;" para autocompletar la clase, porque la ventana emergente modal tiene un valor 10051 z-index.

Fuente

2015-02-19 08:06:41

AJAX Control Toolkit autocompletado que aparece detrás de la ventana emergente modal

Respuesta

Cuestiones relacionadas