Ajax DropDown Extender - Move Items Below

I have a sidebar menu. There's not a lot of room, I'd like to use the Ajax DropDown so that only items at the top level hierarchy are displayed until the user clicks.

I currently have one DropDown stacked on top of another (ultimately there will be approx 10). I've got the drop down working with an OnShow/FadeIn animation. The problem is, the text that appears in the drop down is displayed over the Drop Down below it.

The behaviour I'd like can be seen at the page: http://www.asp.net/ajax/ajaxcontroltoolkit/samples/dropdown/dropdown.aspx On this page you can see that "Drop Down Properties" moved down the screen to make way for "Drop Down Description"

I have pasted my code below. Could anyone tell me what I've done wrong?

Thanks

Rob.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="RDM.Main" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div id="wrapper">
        <div id="header">
            <span id="websiteName">Reference Data Load Manager</span><br />
        </div>
        <span id="topbar">
            <asp:Label ID="lblPageName" runat="server" Text="Page Name Goes Here"></asp:Label>
        </span>
        <div id="toolbar">
            <asp:Button ID="btnDataLoad" runat="server" Text="Execute Data Load" OnClick="btnDataLoad_Click"
                CssClass="Button" Enabled="false" />
            <asp:Image ID="Image1" runat="server" CssClass="Rubbish" />
            <br />
            <asp:Label ID="lblBODIJobStatus" runat="server" Text="" BackColor="#9999FF" Font-Italic="True"
                ForeColor="White"></asp:Label>
            <asp:Timer ID="timLoadJob" runat="server" Enabled="False" Interval="2000" OnTick="timerTick">
            </asp:Timer>
        </div>
        <div id="sidebar">
            <asp:Label ID="lblBTF" runat="server" Text="(BTF) Bache Trade Load" />
            <asp:DropDownExtender ID="ddeBTF" runat="server" TargetControlID="lblBTF" DropDownControlID="pnlBTF">
                <Animations>
                <OnShow>
                    <Sequence>                    
                        <HideAction Visible="true" />                                           
                        <FadeIn  Duration=".5" Fps="10" />          
                    </Sequence>
                </OnShow>
                <OnHide>
                    <Sequence>                        
                        <FadeOut Duration=".5" Fps="10" />
                        <HideAction Visible="false" />
                        <StyleAction Attribute="display" Value="none"/>
                    </Sequence>
                </OnHide>
            </Animations>
            </asp:DropDownExtender>
            <asp:Panel ID="pnlBTF" runat="server">
                <a href="BacheAccountSettings.aspx">Bache Account Mappings</a><br />
                <a href="BacheAccountSettingsDetail.aspx">Create New Record</a><br />
                <a href="TradeMapping.aspx">Bache to TC Mappings</a><br />
                <a href="TradeMappingDetail.aspx">Create New Record</a><br />
                <a href="AjaxBODI.aspx?btf">Run DI Job</a>
            </asp:Panel>
            <br />
            <asp:Label ID="lblBIM" runat="server" Text="(BIM) Bache Initial Margin" />
            <asp:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="lblBIM" DropDownControlID="pnlBIM">
                <Animations>
                <OnShow>
                    <Sequence>                    
                        <HideAction Visible="true" />                                           
                        <FadeIn  Duration=".5" Fps="10" />          
                    </Sequence>
                </OnShow>
                <OnHide>
                    <Sequence>                        
                        <FadeOut Duration=".5" Fps="10" />
                        <HideAction Visible="false" />
                        <StyleAction Attribute="display" Value="none"/>
                    </Sequence>
                </OnHide>
            </Animations>
            </asp:DropDownExtender>
            <asp:Panel ID="pnlBIM" runat="server">
                <a href="BacheProductMappings.aspx">Bache Product Mappings</a><br />
                <a href="BacheProductMappingsDetail.aspx">Create New Record</a><br />
                <a href="BacheProductLimitMappings.aspx">Bache Product Limit Mappings</a><br />
                <a href="BacheProductLimitMappingsDetail.aspx">Create New Record</a><br />
                <a href="AjaxBODI.aspx?btf">Run DI Job</a>
            </asp:Panel>
            <br />
        </div>
        <div id="mainContent">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            <asp:SqlDataSource ID="dsArcReference" runat="server" ConnectionString="<%$ ConnectionStrings:ARC_REFERENCEConnectionString %>"
                SelectCommand="select ACCOUNT_SOURCE_ID as 'SourceID',
    [ACCOUNT_BTF_GROUP_COMPANY] as 'GroupCompany',
    [ACCOUNT_BTF_PORTFOLIO] as 'Portfolio',
    [ACCOUNT_BTF_ON_BEHALF_COMPANY] as 'OnBehalfComp',
    [ACCOUNT_BTF_ASSIGNED_TRADER] as 'AssignedTrader'
    from dbo.REF_BACHE_ACCOUNT" UpdateCommand="update dbo.REF_BACHE_ACCOUNT
set [ACCOUNT_BTF_GROUP_COMPANY] = @GroupCompany,
[ACCOUNT_BTF_PORTFOLIO] = @Portfolio,
[ACCOUNT_BTF_ON_BEHALF_COMPANY] = @OnBehalfComp,
[ACCOUNT_BTF_ASSIGNED_TRADER] = @AssignedTrader
where [ACCOUNT_SOURCE_ID]=@SourceID">
                <UpdateParameters>
                    <asp:Parameter />
                    <asp:Parameter Name="ACCOUNT_SOURCE_ID" />
                </UpdateParameters>
            </asp:SqlDataSource>
        </div>
        <asp:Label ID="lblError" runat="server" CssClass="ErrorText"> </asp:Label>
        <div id="footerBar">
            <asp:Label ID="Label1" runat="server" Text="Arcadia Petrolium"></asp:Label>
        </div>
    </div>
    </form>
</body>
</html>

ansaurus

tags:

views:

answers:

Ajax DropDown Extender - Move Items Below

related questions