Automatically populate the AJAX Control Toolkit behind a modal popup

Question

I have a problem with AutoCompleteExtender inside the AJAX Control Toolkit that I just cannot understand. The control is located inside the asp: Panel associated with the ModalPopupExtender toolbox. Everything works beautifully in the latest generations of IE9, FF and Opera, but glitches in Safari and Chrome (assuming that this is related to WebKit).

The failure is that the drop from autocomplete lags behind the modal popup, and not in front of it (the names are blurred for privacy reasons):

Having looked at things in Firebug, the drop-down menu is displayed in an unordered list here:

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

The autoCompleteList class is as follows:

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

And the resulting div for the modal popup looks like this:

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

With the following modalPopup CSS class:

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

My guess is that the subscript z in the list makes it lag behind the div, but then again, it plays well in browsers other than WebKit. Z-indexes are also built-in styles, so they obviously go straight from the controls. Am I missing something? Any suggestions? (except for WebForms and AJAX ditches and using jQuery)

Answer 1

Seeing that you suspect that the z-index is causing the problem, what happens if you try to override the inline styles that spit out using the Ajax Control Toolkit using !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; } 

I know it’s a little hack, but if you haven’t tried it yet, can it be worth a shot?

Answer 2

Ian, I had a similar problem with a modal popup and several callout expanders. The leader has always been under the popup. I omitted the z-index of modal with important and poof. Started to work. Thank you for the suggestion.

Answer 3

I ran into the same problem.

My code worked very well in mozilla. but it did not work with Safari and Chrome.

Now I installed "z-index: 12000! Important"; for the autocomplete class, since the modal popup has a value of 10051 z-index.