Thursday, March 4, 2010

AutoCompleteExtender problems with ModalPopupExtender

If you've tried to use the AutoCompleteExtender inside a ModalPopupExtender, you'll notice that the autocomplete options show behind the modal popup. This is a Z-index problem in which the ModalPopupExtender overrides all other controls. If you check the modal's Z-index you'll see that it uses 100001 for its foreground element, so use something higher like 10000001.

<cc1:AutoCompleteExtender ID="ace" runat="server" OnClientShown="ShowOptions">
</cc1:AutoCompleteExtender>

<script language="javascript" type="text/javascript">
    function ShowOptions(control, args) {
        control._completionListElement.style.zIndex = 10000001;
    }
</script>
 
So we use the OnClientShown property which will call a javascript function to change the AutoCompleteExtender's Z-index when it kicks in.

18 comments:

  1. Thanks a lot, Really searched on net for a long and finally found this working. Thanks again buddy.

    ReplyDelete
  2. Wow, thanks do much for this... great code!

    Louis

    ReplyDelete
  3. It works! Thanks a lot!

    ReplyDelete
  4. Excellent! Thanks!

    ReplyDelete
  5. I was just hungry for this solution. Tanks a lot.

    ReplyDelete
  6. AWESOME!!!!!!!!!! thanx soooooo much! help me alot

    ReplyDelete
  7. Master!! Gracias!

    ReplyDelete
  8. Buenisimo.... thank you so much.... Muy buena ayuda. thanks for your help.

    ReplyDelete
  9. Awesome, had me going nuts for ages, your solution saved me loads of time, thanks

    ReplyDelete
  10. thank you so much sir

    ReplyDelete
  11. THAAAAAAAAAAAAAANK YOUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

    ReplyDelete
  12. Thankssssssssssssssssssssss budddddyyyyyyyy

    ReplyDelete
  13. Me sirvio mucho tu ayuda Gracias

    thanks for your help

    ReplyDelete