[Solved] ASP.Net AJAX AutoComplete List not displaying when used inside Modal Popup

Manoj2807
 
on May 04, 2014 12:04 AM
9676 Views

I have Used Ajax AutoComplete Extender In my Project But MY List Does Not Show On  Ajax Model Popup Ajax Extender Sugges me Css For Display My Auto Complete List On Model Pouup Ajax Extender

 

This is My TextBox And AutoComplete Extender 

 

<asp:TextBox runat="server" ID="txtsearcho" CssClass="txt2" Width="140" OnTextChanged="txtsearcho_TextChanged"
                                                Visible="False" AutoPostBack="True"></asp:TextBox>

<asp:AutoCompleteExtender ID="txtsearcho_AutoCompleteExtender" MinimumPrefixLength="1"
                                                runat="server" DelimiterCharacters="" Enabled="True" ServiceMethod="GetCompletionList"
                                                ServicePath="" TargetControlID="txtsearcho" UseContextKey="True" CompletionListCssClass="AutoExtender"
                                                CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight">
                                            </asp:AutoCompleteExtender>

and This Is My CSS Class

 

 

.AutoExtender
  {
   font-family: Verdana, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: lighter;
    border: solid 1px #006699;
    line-height: 20px;
    padding: 0px;
    width:45px;
    display:block;
    background-color: White;
    margin-left:10px;
    margin-right:2px;
  }
 .AutoExtenderList
 {
   display:block;
   elevation:higher;
   border-bottom: dotted 1px #006699;
   cursor: pointer;
   color: Maroon;
 }
.AutoExtenderHighlight
{
  color: White;
  background-color: #006699;
  cursor: pointer;
}

It Work On Normal Text Box But Does'nt On Model Popup Extnder TextBox

Plz Help Me

Download FREE API for Word, Excel and PDF in ASP.Net: Download
Mudassar
 
on May 04, 2014 12:36 AM

Try

.AutoExtenderList
 {
   display:block;
   elevation:higher;
   position:relative;
   z-index:9999;
   border-bottom: dotted 1px #006699;
   cursor: pointer;
   color: Maroon;
 }