specify z-index

3 posts, 0 answers
  1. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 11 Feb 2013 Link to this post

    How do i properly specify a z-index for the AutoComplete Textbox?  I've put an AutoComplete Textbox in a modal popup Extender, and the problem i'm having is that the drop down appears behind the window and isn't visible.   I've tried specifying a z-index on the control itself.

    RadAutoCompleteBox1.Style["z-index"] = "100000";

    and i've also tried specifying a z-index on the item template markup

    <DropDownItemTemplate>                
        <table cellpadding="0" cellspacing="0" width="450px" style="z-index:100000">
    ...
       </table>
    </DropDownItemTemplate>

    and neither of these seem to have any effect.

    Please advise.
    -Mark
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Feb 2013 Link to this post

    Hi,

    Please check the following ASPX ans CSS I tried to show the DropDown of the AutoCompleteBox above the ModalPopUp.

    ASPX:
    <asp:LinkButton ID="LinkButton1" runat="server" Text="Click Me"></asp:LinkButton>
    <ajax:ModalPopupExtender ID="ModalPopupExtender" runat="server" PopupControlID="popUpPanel"
        BackgroundCssClass="BackGround" TargetControlID="LinkButton1" CancelControlID="RadButton1">
    </ajax:ModalPopupExtender>
    <asp:Panel ID="popUpPanel" runat="server" BackColor="LightBlue" CssClass="PopUp">
        <div class="inner">
            <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" EmptyMessage="Enter Text" CssClass="Rad"
                DataSourceID="SqlDataSource2" DataTextField="ContactName">
            </telerik:RadAutoCompleteBox>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="select ContactName from [Customers]"></asp:SqlDataSource>
            <br />
            <br />
            <telerik:RadButton ID="RadButton1" runat="server" Text="Close" />
        </div>
    </asp:Panel>

    CSS:
    <style type="text/css">
        .BackGround
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
            z-index:100 !important;
        }
        .PopUp
        {
            z-index:1001 !important;
        }
    </style>

    Thanks,
    Princy.


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 12 Feb 2013 Link to this post

    Thanks that did seem to fix the issue when i specifically set the z-index on the panel.

    -Mark
Back to Top