How to Set Submenu Width

3 posts, 0 answers
  1. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 04 Mar 2013 Link to this post

    I have a menu that has 3 levels.  The WebBlue Theme has the following style:

    .RadMenu_WebBlue .rmItem a.rmLink {
        width: 155px !important;
        overflow: hidden !important;
    }
    .RadMenu_WebBlue .rmLink:hover, .RadMenu_WebBlue .rmFocused, .RadMenu_WebBlue .rmExpanded {
        width: 155px !important;
        min-height: 25px !important;
        color: #276c9d !important;
        background: #FFFFFF !important;
        border-color: #336699 !important;
    }

    The top 2 levels of the menu I want the width to be 155px and this is working fine.  What I would like to accomplish is setting level 3 of the menu to a width much larger than the top 2 levels to 340px.  I feel like I'm kind of close, but need help getting the text to display correctly.  Please see attached screen shot.

    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function onClientItemOpening(s, e) {
                var item = e.get_item();
                if (item.get_text() == 'Sub Menu 1') {
                    for (var i = 0; i < item.get_items().get_count(); i++) {
                        var li = item.get_items().getItem(i).get_element();
                        li.style.width = 340;
                    }
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>
            <telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemOpening="onClientItemOpening">
                <Items>
                    <telerik:RadMenuItem Text="Applications"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="This App">
                        <Items>
                            <telerik:RadMenuItem Text="Sub Menu 1">
                                <Items>
                                    <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 1"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 2"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 3"></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>
        </form>
    </body>
    </html>

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Mar 2013 Link to this post

    Hello Rob,

    You can set the OuterCssClass property of the RadMenuItems to controls the appearance of the item (the outer <li> tag). Please have a look at the following code and the attached snapshot.

    ASPX:
    <telerik:RadMenu ID="RadMenu1" runat="server" Skin="WebBlue">
        <Items>
            <telerik:RadMenuItem Text="Applications">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="This App" OuterCssClass="style1">
                <Items>
                    <telerik:RadMenuItem Text="Sub Menu 1" OuterCssClass="style1">
                        <Items>
                            <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 1" OuterCssClass="style2">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 2">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 3">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    CSS:
    <style type="text/css">
        .style1
        {
            width:155px !important;
        }
        .style2
        {
            width:500px !important;
        }
    </style>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 05 Mar 2013 Link to this post

    Princy,

    Your code works great only after I remove the width settings in the WebBlue Skin's css.  

    Thank you very much for your response!

    Rob
Back to Top