RadMenu Inside RadTab

2 posts, 0 answers
  1. Betty
    Betty avatar
    4 posts
    Member since:
    Jun 2011

    Posted 05 Oct 2011 Link to this post

    Hello

    I'm trying to place a RadMenu inside of a RadTab, and position the menu such that the menu would display below the tab and the top level menu item would be beside the tab text. However, I'm not having much luck doing so. I'm using following code snippet

    <head runat="server">
        <title></title>
        <style type="text/css">
            div.RadMenu a.rmLink .rmLeftImage
            {
                position: relative;
            }
             
            div.RadMenu .rmItem .rmLink .rmLeftImage, div.RadMenu .rmItem .rmLink, div.RadMenu .rmLink .rmText
            {
                margin: 0;
                padding: 0;
            }
            .RadTabStrip .rtsLevel, .RadTabStrip .rtsUL, .RadTabStrip .rtsLI
            {
                float: left !important;
                overflow: visible !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadTabStrip ID="RadTabStrip" runat="server" Skin="WebBlue">
                <Tabs>
                    <telerik:RadTab Text="Test 1" Selected="true" />
                    <telerik:RadTab Text="Test 2" />
                    <telerik:RadTab Text="Test 3" />
                    <telerik:RadTab Text="Test 4">
                        <TabTemplate>
                            Test 4
                            <telerik:RadMenu ID="RadMenu" runat="server" Skin="" EnableImagePreloading="true"
                                DefaultGroupSettings-OffsetY="-1">
                                <Items>
                                    <telerik:RadMenuItem ImageUrl="~/Images/downarrow.png">
                                        <Items>
                                            <telerik:RadMenuItem Text="Menu Item 1" />
                                            <telerik:RadMenuItem Text="Menu Item 2" />
                                        </Items>
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenu>
                        </TabTemplate>
                    </telerik:RadTab>
                    <telerik:RadTab Text="Test 5" />
                    <telerik:RadTab Text="Test 6" />
                    <telerik:RadTab Text="Test 7" />
                    <telerik:RadTab Text="Test 8" />
                </Tabs>
            </telerik:RadTabStrip>
         
        </div>
        </form>
    </body>
    </html>

    However, the menu is under the button text and not beside it. Is there any way to achieve this ?
  2. Betty
    Betty avatar
    4 posts
    Member since:
    Jun 2011

    Posted 05 Oct 2011 Link to this post

    I found the answer.
    div.RadMenu
            {
                position: relative;
                bottom: 15px;
                left: 40px;
            }
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top