Right align a single RadMenuItem

3 posts, 0 answers
  1. Bill O'Neil
    Bill O'Neil avatar
    113 posts
    Member since:
    Nov 2004

    Posted 23 Nov 2009 Link to this post

    not sure if I'm missing something obvious here - but is there a way to right align a single menu item?
    Basically I have a 100% width menu - where I want most of the menu items to appear normally (aligned to the left) but the last item (a logoff button) to always appear at the right side (end) of the menu.

    Possible?
  2.
  3. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 24 Nov 2009 Link to this post

    Hi Bill,

    Please find below a sample code snippet that shows the needed approach.

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            div.RadMenu .rmLast
            {
                float: right;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
        </telerik:RadScriptManager>
        <telerik:RadMenu ID="RadMenu1" runat="server" Width="100%">
            <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>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
        </form>
    </body>
    </html>


    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. barshj
    barshj avatar
    3 posts
    Member since:
    Feb 2007

    Posted 04 Dec 2009 Link to this post

     
    div.RadMenu .rmLast   
    {  
    float: right;   
    } 

     

     

     

    does not work properly for menues with subitems in IE6/7 even though it does in IE8. The above style causes the last sub-menu item in the menu to be displaced floating right as well as the menu item you had intended.

    Yana from the Telerik team gave me these styles to replace the above style which solves the problem. I thought this to be something useful for others who are trying to do this with their menu.
     

     

    div.RadMenu .rmRootGroup .rmLast   
    {  
    float: right;   
    }  
     
    div.RadMenu .rmGroup .rmLast  
    {  
    float: none;   
    }  
     

     

    works for me. Thanx Yana!!!

     

Back to Top