how to center align the root menu using css

15 posts, 1 answers
  1. sathish venkat
    sathish venkat avatar
    27 posts
    Member since:
    Feb 2010

    Posted 14 Apr 2010 Link to this post

    hi 

    i am using rad menu control for horizontal menu and i am using black css
    i need to center align my root menu please give me a solution for this
    CurrentMenu.jpg---now i am getting this menu
    RequiredMenu.jpg---i need to change like this
    please refer attached screen shots
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 15 Apr 2010 Link to this post

    Hello sathish,

    Please take a look at this demo for a solution.

    The idea is to use the DefaultGroupSettings property and set a negative value to be able to shift the child items to the left:

    <telerik:RadMenu ID="RadMenu1" runat="server">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                        </Items>
                        <GroupSettings OffsetX="0" />
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
                <DefaultGroupSettings OffsetX="-50" />
            </telerik:RadMenu>

    Regards,
    Veronica Milcheva
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sathish venkat
    sathish venkat avatar
    27 posts
    Member since:
    Feb 2010

    Posted 15 Apr 2010 Link to this post

    Hi,

       Thanks for your reply  your solution is useful to center align the sub menu items
    is there any option to centre align the root menu because i given root menu width as 200px each, so i need to
    center align root menu text
  5. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 15 Apr 2010 Link to this post

    Hi sathish venkat,

    Please take a look at this knowledge base article:
    http://www.telerik.com/support/kb/aspnet-ajax/menu/how-to-stretch-the-menu-items-to-fill-the-entire-width-of-the-menu.aspx

    Hope this helps.

    Kind regards,
    Veronica Milcheva
    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.
  6. sathish venkat
    sathish venkat avatar
    27 posts
    Member since:
    Feb 2010

    Posted 15 Apr 2010 Link to this post

    hi

         that javascript not working because i am using user control for menu and binding menu from xml
    please help me to solve the issue
  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 20 Apr 2010 Link to this post

    Hello sathish,

    Do you get any specific errors? The fact that your RadMenu is in a user control and populated from xml should not affect the approach from the kb article. Can you isolate the problem and send it to us via a support ticket?

    Regards,
    Peter
    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.
  8. Answer
    TCF Schepers
    TCF Schepers avatar
    7 posts
    Member since:
    Apr 2006

    Posted 21 Jun 2010 Link to this post

    Hi sathish,

    I coped with the same issue as you, and I've found the solution. The problem is that the CSS-classes you want are being overruled by the standard webresource.axd. So, in order for things to work, you'll have to overrule those yourself with the standard CSS selectors.

    Here's a copy of my CSS:

    .RadMenu_samplemenu   
    {  
        font-family:ArialVerdana;  
        font-size:14px;  
        color:#FFFFFF;  
        margin-left:100px;  
    }  
    .RadMenu_samplemenu .rmItem  
    {  
        margin-top:6px;  
        width:122px;  
        height:30px;  
        border-right:solid 1px #FFFFFF;  
    }  
     
    .RadMenu_samplemenu .rmFirst  
    {  
        margin-top:6px;  
        width:122px;  
        height:30px;  
        border-left:solid 1px #FFFFFF;  
    }  
    .RadMenu .rmLink  
    {  
        text-decoration:none;  
        width:100%!important;  
        padding:0px!important;  
        text-align:center;  
    }  
    .RadMenu .rmText  
    {  
        margin-left:auto!important;  
        margin-right:auto!important;     
        float:none!important;  
    }  
    .RadMenu .rmHorizontal .rmText  
    {  
        padding:0px!important;     
    }  
    .RadMenu_samplemenu .rmItem .rmText  
    {  
        margin-top:6px;  
        color:#FFFFFF;  
    }  
    .RadMenu_samplemenu .rmItem .rmText:hover  
    {  
        color:#000000;  
        cursor:hand;  
        cursor:pointer;  
    }  
    .RadMenu_samplemenu .rmItem .rmText:active  
    {  
          

    If you have any questions, do not hesitate to ask.

    Regards and good luck,

    Thomas Schepers
  9. Jeff
    Jeff avatar
    3 posts
    Member since:
    Nov 2011

    Posted 29 Nov 2011 Link to this post

    While this works for me as well, how do I tell the submenu items to NOT be centered while the top level text is centered?
  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Nov 2011 Link to this post

    Hello Jeff,

    Try the following CSS.
    CSS:
    <style type="text/css">
     .RadMenu .rmGroup .rmText
     {
        margin: 0 0 0 -20px !important;
        background-color:White !important;
     }
    </style>

    -Shinu.
  11. Richard
    Richard avatar
    1 posts
    Member since:
    Jan 2011

    Posted 06 Feb 2012 Link to this post

    This is what worked for me to get the top level centered but the sub-level left aligned.

    .RadMenu .rmText
    {
        text-align: center;
    }

    .RadMenu .rmGroup .rmText
    {
         text-align: left !important;
    }

  12. Bharadwaj
    Bharadwaj avatar
    3 posts
    Member since:
    Sep 2012

    Posted 21 Sep 2012 Link to this post

    i used ur code for making top level to center and sub level to left aligned.... but top level is always aligned to left... der is any other way to do top level as center aligned...can u please help me out with dis..
  13. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 26 Sep 2012 Link to this post

    Hi Bharadwaj,

    Try using the following css class selector to get the desired appearance of the RadMenu:
    div.RadMenu .rmText
           {
               text-align: center;
               color: Red;
           }
           div.RadMenu .rmText
           {
               float: none;
           }
           div.RadMenu .rmHorizontal .rmItem
           {
               text-align: center;
           }
           div.RadMenu .rmGroup .rmText
           {
               text-align: left !important;
               color: Green;
           }

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  14. Velu
    Velu avatar
    4 posts
    Member since:
    Jun 2013

    Posted 19 Aug 2013 Link to this post

    I tried this. This isn't working either. The first level menu is always left aligned.
  15. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Aug 2013 Link to this post

    Hello Kulanthaivel,

    Can you please provide the markup that you are using so I can test if there is something specific in your scenario and assist you in getting the desired look?

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  16. Zaharan
    Zaharan avatar
    1 posts
    Member since:
    Sep 2011

    Posted 19 Sep 2013 Link to this post

    Thanks Kate.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017