Evenly spaced root menu

4 posts, 0 answers
  1. Rick Glos
    Rick Glos avatar
    70 posts
    Member since:
    Mar 2009

    Posted 05 Mar 2010 Link to this post

    I'd like to evenly space the root menu items.  I've created a custom skin by copying the Menu.default.css and attempting to modify it but any combination of .RadMenu_x .rmRootGroup .rmItem seem to grab all the items in the menu and I only want to do this to the first row in the menu.

    Here's what I'm working on.  There's an old ASP.NET menu above where I'm sticking the RadMenu - you can see that is is evenly spaced menuitems.  Image here.
  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 05 Mar 2010 Link to this post

    I've done the following to evenly space out four items across my RadMenu, perhaps this'll work for you :)

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />  
        <style type="text/css">  
            div.RadMenu .rmItem  
            {  
                padding: 0;  
            }  
      
            div.RadMenu .rmLink,  
            div.RadMenu .rmText  
            {  
                float: none;  
                text-align: center;  
            }  
        </style>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            <Scripts>  
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />  
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />  
            </Scripts>  
        </telerik:RadScriptManager>  
        <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Forest" Width="100%" Flow="Horizontal">  
            <Items>  
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1" Width="25%">  
                </telerik:RadMenuItem>  
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2" Width="25%">  
                </telerik:RadMenuItem>  
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3" Width="25%">  
                </telerik:RadMenuItem>  
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem4" Width="25%">  
                </telerik:RadMenuItem>  
            </Items>  
        </telerik:RadMenu>  
        </form>  
    </body>  
    </html>  

  3. Rick Glos
    Rick Glos avatar
    70 posts
    Member since:
    Mar 2009

    Posted 08 Mar 2010 Link to this post

    Yes I'm trying to each that same effect, but I don't have access to the items, and therefore the width property on the RadMenuItem object, because I'm binding directly to a SiteMapDataSource.

        <div> 
            <telerik:RadMenu ID="WebsiteRadMenu" Runat="server" DataSourceID="SiteMapDataSourceMenu" EnableEmbeddedSkins="False" Skin="Perkins"></telerik:RadMenu> 
            <asp:SiteMapDataSource ID="SiteMapDataSourceMenu" runat="server"  ShowStartingNode="False" /> 
        </div> 

    How do I grab just the first group, the rmRootGroup, without grabbing all the children is what I can't seem to figure out via CSS.
  4. Yana
    Admin
    Yana avatar
    4847 posts

    Posted 11 Mar 2010 Link to this post

    Hello Rick Glos,

    Please use the following css styles to set static width to the root items and align the text in the center:

    div.RadMenu .rmRootGroup .rmLink 
    {
        padding: 0
    }
     
    div.RadMenu .rmRootGroup .rmText 
    {      
        width: 120px  !important;  
        padding: 0;
        text-align: center;
    }
     
    div.RadMenu .rmGroup  .rmText
    {
        width: auto !important;
    }
     
    div.RadMenu .rmGroup .rmText {
       margin:0 0 0 4px;
       padding:0 54px 0 28px;
       text-align: left;
     }


    Greetings,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top