AJAX Control Toolkit auto-complete appearing behind the modal popup

Question

I've got a problem with the AutoCompleteExtender inside the AJAX Control Toolkit which I just can't seem to get to the bottom of. The control sits inside an asp:Panel linked to a ModalPopupExtender from the toolkit. Everything works beautifully in the latest generations of IE9, FF and Opera but glitches in Safari and Chrome (assuming it's WebKit related).

The glitch is that the drop down from the autocomplete is falling behind the modal popup rather than in front of it (names blurred for privacy reasons):

Looking at things in Firebug, here's the drop down rendered in an unordered list:

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

The autoCompleteList class looks like this:

.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 assumption is that the lower z-index on the list is causing it to fall behind the div but then again, it plays nice in the non-WebKit browsers. The z-indexes are also inline styles so they're obviously coming straight from the controls. Am I missing something here? Any suggestions? (other than ditching WebForms and AJAX and employing jQuery)

Slay

Unfortunately it's sitting behind a firewall so no live example publicly available. – Slay

Answer 1

Seeing as you suspect it's the z-index causing the problem, what happens if you try and override the inline styles that are spat out by 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 bit of a hack but if you haven't tried it yet it might be worth a shot?

Splitlevel

Nice one! I ended up just dropping "z-index:100002 !important;" on the autoCompleteList class and it's jumped up on top of everything else. Hacky, but happy :) – Slay

Thank you! I had a feeling it was a z-index problem, but I was missing the !important. That fixed it. – Johnnie

Answer 2

Ian, I was having a similar problem with a modal popup and several callout extenders. The callout was always under the popup. I lowered the z-index of the modal with the !important and poof. Started working. Thanks much for the suggestion.

Emanate

Answer 3

I have came across same problem.

My code was running pretty fine in mozilla. but it was not working on Safari and Chrome.

Now I set "z-index:12000 !important;" to autocomplete class, because modal popup has 10051 z-index value.

Dali