Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

Last post 05-13-2009 6:56 AM by Zhi-Qiang Ni - MSFT. 19 replies.

Sort Posts:

  • Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-17-2008, 3:48 PM
    • Member
      4 point Member
    • synapse88
    • Member since 12-31-2007, 10:01 PM
    • Posts 27
    I have successfully implemented a autocomplete list for an item on a form I'm working on. However when the suggestion list is returned, there is a drop down list directly behind the list, and it's showing up on top of my suggestion list. This makes it very difficult to see/select items in the suggestion list. Anyone have any ideas on how to prevent this from happening? Obviously I want my suggestion list to be on top of any controls that are underneath it. I've been reading about resetting the Z Index of one of my control but I have been unable to do so thus far. Thanks for any ideas. As a side question, how can i post my code on this site?
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-18-2008, 10:10 AM
    • Member
      4 point Member
    • synapse88
    • Member since 12-31-2007, 10:01 PM
    • Posts 27
    anyone?
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-18-2008, 4:48 PM
    • Contributor
      2,805 point Contributor
    • tehremo
    • Member since 03-15-2008, 1:03 AM
    • Richmond, VA
    • Posts 432

    I would agree that z-index should be the problem solver.  Since the AutoCompleteExtender has its own CSS classes, you may need to set the z-index on each of those as well.

    "Sector clear"
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-19-2008, 1:57 AM
    Answer

    Hi synapse88,

    To popup the CompletionList on the top of the window, we need to set its z-index property. Please refer to my sample code about how to set the CompletionList: 

            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox2" ServicePath="AutoComplete1.asmx" ServiceMethod="GetCompletionListByRandom" MinimumPrefixLength="2" CompletionInterval="10" EnableCaching="true" OnClientShowing="clientShowing">
    </ajaxToolkit:AutoCompleteExtender>
    <script type="text/javascript">
    function clientShowing(source, args) {
    source._popupBehavior._element.style.zIndex = 100000;
    }
    </script>
    Have my code helped?

    Best regards,

    Zhi-Qiang Ni

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-22-2008, 9:37 AM
    • Member
      4 point Member
    • synapse88
    • Member since 12-31-2007, 10:01 PM
    • Posts 27
    That script didn't do the trick...the drop down is still showing through.

    here's a picture of what it looks like

  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-22-2008, 9:00 PM

    Hi synapse88,

    Please post your related code here to let me modify it. To achieve debug the javascript in VS, please refer to this page:http://asp.net/ajax/documentation/live/Overview/ASPNETAJAXDebuggingAndTracingOverview.aspx

    Best regards,

    Zhi-Qiang Ni

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-23-2008, 1:35 PM
    • Member
      4 point Member
    • synapse88
    • Member since 12-31-2007, 10:01 PM
    • Posts 27
    How can I post my code here? Every time I try the browser tried to render it... I've tried textarea and a few other but no luck so far
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-23-2008, 10:24 PM

    Hi,

    Please refer to my figure here. Note that we need choose the correct language.

     

    Best regards,

    Zhi-Qiang Ni

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-30-2008, 10:14 AM
    • Member
      4 point Member
    • synapse88
    • Member since 12-31-2007, 10:01 PM
    • Posts 27

    Oh for some reason that bar doesn't show up in Chrome, so I never saw the buttons :(

    Here is my ASP code:

      

    1    <asp:UpdatePanel ID="UpdatePanel6" runat="server">
    2    <ContentTemplate>
    3    <a class="TextLabel">Store Name</a><br />
    4    <asp:TextBox ID="txtName" runat="server" CssClass="TextBox" Width="200px" MaxLength="60" Text='<%# Bind("storename") %>' AutoPostBack="True"></asp:TextBox><br />
    5    <cc1:AutoCompleteExtender ID="autoPortName" runat="server" TargetControlID="txtName" ServicePath="AutoCompletes.asmx" ServiceMethod="GetStoreNames" MinimumPrefixLength="1" EnableCaching="true" />
    6    </ContentTemplate>
    7    <triggers>
    8    <asp:AsyncPostBackTrigger ControlID="txtName" EventName="TextChanged"></asp:AsyncPostBackTrigger>
    9    </triggers>
    10   </asp:UpdatePanel>
    11   <a class="TextLabel">Store Alias</a><br />
    12   <asp:TextBox ID="txtAlias1" runat="server" CssClass="TextBox" Width="200px" MaxLength="60" Text='<%# Bind("storealias") %>'></asp:TextBox><br />
    13   <a class="TextLabel">Store Type</a><asp:RequiredFieldValidator ID="reqType" runat="server" ControlToValidate="cboStoreType" ErrorMessage="*required" Display="dynamic" CssClass="TextLabel"></asp:RequiredFieldValidator><br />
    14   <asp:DropDownList ID="cboStoreType" runat="server" CssClass="TextBox" AppendDataBoundItems="true"
    15   DataSourceID="sqlStoreType" DataTextField="type" DataValueField="ident" SelectedValue='<%# Bind("type") %>'>
    16   <asp:ListItem Value="">Not Entered</asp:ListItem>
    17   </asp:DropDownList><br />
    
     
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-30-2008, 9:50 PM

    Hi synapse88,

    I have tested your code locally, but the issue can’t be reproduced. Maybe your css class is the cause, please post all your code here.

    Best regards,

    Zhi-Qiang Ni

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    12-31-2008, 2:01 PM
    • Member
      4 point Member
    • synapse88
    • Member since 12-31-2007, 10:01 PM
    • Posts 27

    Thank you for your post. I began stripping items out until I figured out what was causing the problem. I am using a master page, and a DIV element in that master page is using relative positioning. When I remove the position part of that DIV tag, there is no problem with the autocomplete list. When I put it back, the dropdownlist is popping back up in the middle of the list. But of course I can't just remove that DIV style as it's on the master page and is important to the site. I have tried a few things but can't seem to fix this (while using the master page). Please see my code below. Thanks for any ideas.

     Here's my store.aspx file:

    <%@ Page Language="VB" MasterPageFile="~/themaster.master" EnableViewStateMac="false" AutoEventWireup="false" CodeFile="test.aspx.vb" MaintainScrollPositionOnPostback="true" Inherits="test" Title="test page" %>
    
    <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        Namespace="System.Web.UI" TagPrefix="asp" %>
        
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="contentBody" runat="Server">
                
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="AutoCompletes.asmx" />
            </Services>
        </asp:ScriptManager>
        
        <asp:HiddenField ID="hdnSelectedItem" runat="server" />
        <asp:Label ID="lblHiddenProceed" runat="server" Visible="False"></asp:Label>
        
        
        <asp:MultiView ID="mvMain" runat="server" ActiveViewIndex="0">   
        
         <asp:View ID="vwSearch" runat="server">
         </asp:View>
         
        <asp:View ID="vwStoreLocation" runat="server"> 
               
                <asp:SqlDataSource ID="sqlStoreType" runat="server" ConnectionString="<%$ ConnectionStrings:theconnectionstring %>"
                    SelectCommand="SELECT * from StoreLocType">
                </asp:SqlDataSource>                                                 
                <asp:SqlDataSource ID="sqlStoreLocDetail" runat="server" OldValuesParameterFormatString="original_{0}" ConnectionString="<%$ ConnectionStrings:theconnectionstring %>"                 
                    DeleteCommand="DeleteStoreLocation" DeleteCommandType="StoredProcedure"              
                    InsertCommand="InsertStoreLocInfo" InsertCommandType="StoredProcedure"
                    SelectCommand="SELECT StoreLocInfo.*, Stores.code AS Storecode, Stores.name AS Storename FROM [StoreLocInfo] LEFT OUTER JOIN [Stores] on StoreLocInfo.Store = Stores.ident  WHERE(StoreLocInfo.[ident] = @ident)" 
                    UpdateCommand="UPDATE [StoreLocInfo] SET [Store] = @Store, [alias1] = @alias1, [alias2] = @alias2, [type] = @type">
    

    <SelectParameters>

    <asp:ControlParameter ControlID="hdnSelectedItem" Name="ident" PropertyName="Value" Type="Int32" />

    </SelectParameters>

    <DeleteParameters> <asp:Parameter Name="original_ident" Type="Int32" /> <asp:Parameter Name="original_mstamp" Type="DateTime" /> <asp:Parameter Name="stampu" Type="String" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="Store" Type="Int32" /> <asp:Parameter Name="type" Type="String" /> <asp:Parameter Name="alias1" Type="String" /> <asp:Parameter Name="alias2" Type="String" /> <asp:Parameter Name="original_mstamp" Type="datetime"/> <asp:Parameter Name="original_ident" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="Store" Type="Int32" /> <asp:Parameter Name="type" Type="String" /> <asp:Parameter Name="alias1" Type="String" /> <asp:Parameter Name="alias2" Type="String" /> <asp:Parameter Name="newid" Type="int32" Direction="returnvalue" /> </InsertParameters> </asp:SqlDataSource> <br /> <asp:FormView ID="fvStoreLoc" runat="server" DefaultMode="Edit" DataKeyNames="ident,mstamp" DataSourceID="sqlStoreLocDetail"> <EmptyDataTemplate> <p style="font-family:Verdana;font-size:.8em;font-weight:normal;width:100%;text-align:left"> <br /> <a style="font-size:larger;font-weight:bold">No Record Selected </p> </EmptyDataTemplate> <EditItemTemplate> </EditItemTemplate> <InsertItemTemplate> <td style="vertical-align:top; width:260px"> <asp:UpdatePanel ID="UpdatePanel5" runat="server"> <ContentTemplate> <a class="TextLabel">Store Code</a> <asp:RequiredFieldValidator ID="reqtxtStoreCode" runat="Server" ControlToValidate="txtStoreCode" ErrorMessage="*required" ForeColor="Red" /><br /> <asp:TextBox ID="txtStoreCode" runat="server" Width="40px" MaxLength="4" AutoPostBack="True"></asp:TextBox><br /> </ContentTemplate> <triggers> <asp:AsyncPostBackTrigger ControlID="txtStoreCode"></asp:AsyncPostBackTrigger> </triggers> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel6" runat="server"> <ContentTemplate> <a class="TextLabel">Store Name</a> <asp:HiddenField ID="hdnStoreIdent" runat="server" Value='<%# Bind("Store") %>' /><br /> <asp:TextBox ID="txtStoreName" runat="server" Width="200px" MaxLength="60" AutoPostBack="True"></asp:TextBox><br /> <cc1:AutoCompleteExtender ID="autoStoreName" runat="server" TargetControlID="txtStoreName" ServicePath="AutoComplete.asmx" ServiceMethod="GetStoreNames" MinimumPrefixLength="1" EnableCaching="true" OnClientShowing="clientShowing"/> </ContentTemplate> <triggers> <asp:AsyncPostBackTrigger ControlID="txtStoreName"></asp:AsyncPostBackTrigger> </triggers> </asp:UpdatePanel> <a class="TextLabel">Location Alias(es)</a><br /> <asp:TextBox ID="txtAlias1" runat="server" Width="200px" MaxLength="60" Text='<%# Bind("alias1") %>'></asp:TextBox><br /> <asp:TextBox ID="txtAlias2" runat="server" width="200px" MaxLength="60" Text='<%# Bind("alias2") %>'></asp:TextBox><br /> <a class="TextLabel">Type</a><asp:RequiredFieldValidator ID="reqType" runat="server" ControlToValidate="cboStoreType" ErrorMessage="*required" Display="dynamic"> </asp:RequiredFieldValidator><br /> <asp:DropDownList ID="cboStoreType" runat="server" AppendDataBoundItems="true" DataSourceID="sqlType" DataTextField="type" DataValueField="ident" SelectedValue='<%# Bind("type") %>'> <asp:ListItem Value="">Not Entered</asp:ListItem> </asp:DropDownList><br /> </td> </InsertItemTemplate> </asp:FormView> </asp:View> </asp:MultiView> </asp:Content>
     
    'Here's the codebehind:
    Imports System.Data.sqlClient
    Imports System.Security.Principal
    Imports System.Web.Script.Services
    Imports System.Web.Script.Services.ScriptServiceAttribute
    
    
    Partial Class test
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            Me.mvMain.ActiveViewIndex = 1
            fvStoreLoc.ChangeMode(FormViewMode.Insert)
    
        End Sub
    
    
    End Class
    
     

    And here's my themaster.master file (the code behind is blank)

    When I remove the following snippet, everything is fine (but i need it to remain):
    position:relative;top:10px;width:803px;height:auto;

    <%@ Master Language="VB" CodeFile="themaster.master.vb" Inherits="themaster" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    
    </head>
    <body style="width:100%;text-align:center;background-color:#666699">
        <form id="frmMain" runat="server">
            <div id="mainDiv" style="position:relative;top:10px;width:803px;height:auto; background-color:white;border:solid 1px #666666">        
                <div id="contentDiv" >  
                    <div >
                    <asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
                    </div>
                </div>    
            </div>
        </form>
    </body>
    </html>
     
     
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    01-02-2009, 4:07 PM
    • Member
      4 point Member
    • synapse88
    • Member since 12-31-2007, 10:01 PM
    • Posts 27
    Anyone have any ideas? I feel like I'm so close to fixing this now that we know what's causing it... Thanks for the help!
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    01-05-2009, 8:55 AM
    • Member
      4 point Member
    • synapse88
    • Member since 12-31-2007, 10:01 PM
    • Posts 27
    :(
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    01-07-2009, 11:00 AM
    • Member
      4 point Member
    • synapse88
    • Member since 12-31-2007, 10:01 PM
    • Posts 27
    Anyone have any ideas? I'll try anything...
  • Re: Autocomplete Issue - Dropdownlist showing up on TOP of my autocompleteextender suggestion list - Z Index?

    01-13-2009, 4:08 AM
    Answer

    Hi synapse88,

    Sorry for the delay reply. After testing of your scenario, I found the solution. We need add a invisible iframe into the AutoComplete’s CompletionList to ensure it can be shown upon the DropDownList.

    Here is the test code:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true"
    CodeBehind="Content.aspx.cs" Inherits="SolluTest_AutoComplete.Content" %>

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <script type="text/javascript">
    function clientShowing(source, args) {
    var popup = source._completionListElement;
    var height = popup.scrollHeight;
    var width = popup.scrollWidth;
    //This iframe's height and width should be smaller than the CompletionList but bigger than the DropDownList
    var iframe1 = "<IFRAME id='iframe1' style=' height:" + height + "; width:" + width + "; position:absolute; z-index:-1;border:0px; border-style:none; border-width:0px; ' ></IFRAME>";
    popup.innerHTML = iframe1 + popup.innerHTML;
    }
    </script>

    <style type="text/css">
    /*AutoComplete flyout */.autocomplete_completionListElement
    {
    visibility: hidden;
    margin: 0px !important;
    background-color: inherit;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: 'default';
    overflow: auto;
    height: 200px;
    text-align: left;
    list-style-type: none;
    }
    /* AutoComplete highlighted item */.autocomplete_highlightedListItem
    {
    background-color: #ffff99;
    color: black;
    padding: 1px;
    }
    /* AutoComplete item */.autocomplete_listItem
    {
    background-color: window;
    color: windowtext;
    padding: 1px;
    }
    </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="contentBody" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:TextBox ID="txtName" runat="server" Width="200px" MaxLength="60"></asp:TextBox><br />
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtName"
    ServicePath="AutoComplete1.asmx" ServiceMethod="GetCompletionListByRandom" MinimumPrefixLength="2"
    CompletionInterval="10" EnableCaching="true" OnClientShowing="clientShowing"
    CompletionListCssClass="autocomplete_completionListElement" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
    CompletionListItemCssClass="autocomplete_listItem">
    </ajaxToolkit:AutoCompleteExtender>
    <asp:DropDownList ID="DropDownList1" runat="server" Height="16px" Width="84px">
    <asp:ListItem>123</asp:ListItem>
    <asp:ListItem>234</asp:ListItem>
    <asp:ListItem>qwe</asp:ListItem>
    </asp:DropDownList>
    </asp:Content>
    Please feel free to let me know the result.

    Best regards,

    Zhi-Qiang Ni

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
Page 1 of 2 (20 items) 1 2 Next >