Hi everyone
I have searched google for hours looking for a solution for my problem, but everything I find is at least a year old and really isn't applicable anymore.
The problem is simple. I have a textbox with an auto complete extender inside a modal popup extender. In Firefox and Chrome (and probably Safari since it's WebKit) the unordered list generated by the AutoCompleteExtender renders behind the modal popup. Works fine in IE 8.
I could probably find a way to make this work if I use the CompletionListElementID property, but this has been deprecated and I would prefer to avoid it.
I'm not a CSS guru, so hopefully I'm just missing something simple in my styles. Here's a simplified version of what I'm working with.
Markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SandBox._Default" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AJAX" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><title></title><style type="text/css">
.modalBackground
{
filter: Alpha(Opacity=70);
-moz-opacity:0.70;
opacity: 0.70;
-khtml-opacity: 0.70;
background-color: #000;
}
.modalPanel
{
background-color: White;
height: 300px;
width: 400px;
border: solid 1px black;
}
.autoCompleteList
{
background-color: Blue !important;
border: solid 2px red;
margin: 0px;
z-index: 100000 !important;
}
.autoCompleteListItem
{
background-color: Blue !important;
color: White !important;
z-index: 100000 !important;
}
.autoCompleteSelectedListItem
{
background-color: Yellow !important;
color: Black !important;
z-index: 100000 !important;
}</style></head><body><form id="form1" runat="server"><asp:ScriptManager ID="pageScriptManager" runat="server"><Services><asp:ServiceReference Path="~/AutoComplete.asmx" /></Services></asp:ScriptManager><div><asp:LinkButton ID="goModal" runat="server" Text="Go Modal"></asp:LinkButton></div><asp:Panel ID="modalDiv" CssClass="modalPanel" runat="server"><asp:Table CellPadding="6" CellSpacing="0" BorderStyle="None" HorizontalAlign="Center" runat="server"><asp:TableRow runat="server"><asp:TableCell runat="server"><asp:TextBox ID="autoCompleteTextBox" runat="server"></asp:TextBox></asp:TableCell></asp:TableRow><asp:TableRow runat="server"><asp:TableCell runat="server"><asp:Button ID="okButton" Text="OK" runat="server" /><asp:Button ID="cancelButton" Text="Cancel" runat="server" /></asp:TableCell></asp:TableRow></asp:Table></asp:Panel><AJAX:ModalPopupExtender ID="modalExtender" runat="server"
BackgroundCssClass="modalBackground"
CancelControlID="cancelButton"
Drag="true"
PopupDragHandleControlID="modalDiv"
OkControlID="okButton"
PopupControlID="modalDiv"
TargetControlID="goModal"></AJAX:ModalPopupExtender><AJAX:AutoCompleteExtender ID="autoComplete" runat="server"
CompletionInterval="500"
CompletionSetCount="10"
MinimumPrefixLength="1"
EnableCaching="true"
CompletionListCssClass="autoCompleteList"
CompletionListItemCssClass="autoCompleteListItem"
CompletionListHighlightedItemCssClass="autoCompleteSelectedListItem"
ServiceMethod="GetAutoCompleteData"
ServicePath="AutoComplete.asmx"
TargetControlID="autoCompleteTextBox"></AJAX:AutoCompleteExtender></form></body></html>
Web Service:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace SandBox
{
/// <summary>
/// Summary description for AutoComplete
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService
{
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetAutoCompleteData(string prefixText, int count)
{
List<string> returnData = new List<string>();
for (int i = 0; i < count; i++)
{
returnData.Add(prefixText + "_" + i.ToString());
}
return returnData.ToArray();
}
}
}Any idea? This is driving me crazy!!