Align RadMenu to the right

6 posts, 0 answers
  1. Mohammed
    Mohammed avatar
    1 posts
    Member since:
    Dec 2008

    Posted 29 Dec 2008 Link to this post

    I have a master page where I integrated 6 telerik:RadMenu inside a <table></table> tag. and I would like to align these menus to the right. I try to add the align="right" property to the table. when I execute the page with 1024*768 resolution it works but if i changed the resolution, it does not work.

    here is my code :
    <table cellspacing="0" cellpadding="0" width="95%" style="text-align:right" border="1"
                                                <tr> 
                                                    <td style="width:auto"></td> 
                                                    <td> 
                                                        <telerik:RadMenu ID="mnuRootTop" runat="server" DataSourceID="sitemapWto" Skin="WtoRootTop" 
                                                            EnableEmbeddedSkins="false" /> 
                                                        <asp:SiteMapDataSource ID="sitemapWto" runat="server" SiteMapProvider="wtoTopMenu" /> 
                                                    </td> 
                                                    <td> 
                                                        <img alt="" src="../Images/separator.gif" /> 
                                                    </td> 
                                                    <td> 
                                                        <telerik:RadMenu ID="mnuNewsTop" runat="server" DataSourceID="sitemapNews" Skin="WtoNewsTop" 
                                                            EnableEmbeddedSkins="false" EnableAutoScroll="true" /> 
                                                        <asp:SiteMapDataSource ID="sitemapNews" runat="server" SiteMapProvider="newsTopMenu" /> 
                                                    </td> 
                                                    <td> 
                                                        <img alt="" src="../Images/separator.gif" /> 
                                                    </td> 
                                                    <td> 
                                                        <telerik:RadMenu ID="mnuTradeTop" runat="server" DataSourceID="sitemapTrade" Skin="WtoTradeTop" 
                                                            EnableEmbeddedSkins="false" /> 
                                                        <asp:SiteMapDataSource ID="sitemapTrade" runat="server" SiteMapProvider="tradeTopMenu" /> 
                                                    </td> 
                                                    <td> 
                                                        <img alt="" src="../Images/separator.gif" /> 
                                                    </td> 
                                                    <td> 
                                                        <telerik:RadMenu ID="mnuRessTop" runat="server" DataSourceID="sitemapRess" Skin="WtoRessTop" 
                                                            EnableEmbeddedSkins="false" /> 
                                                        <asp:SiteMapDataSource ID="sitemapRess" runat="server" SiteMapProvider="ressTopMenu" /> 
                                                    </td> 
                                                    <td> 
                                                        <img alt="" src="../Images/separator.gif" /> 
                                                    </td> 
                                                    <td> 
                                                        <telerik:RadMenu ID="mnuDocsTop" runat="server" DataSourceID="sitemapDocs" Skin="WtoDocsTop" 
                                                            EnableEmbeddedSkins="false" /> 
                                                        <asp:SiteMapDataSource ID="sitemapDocs" runat="server" SiteMapProvider="docsTopMenu" /> 
                                                    </td> 
                                                    <td> 
                                                        <img alt="" src="../Images/separator.gif" /> 
                                                    </td> 
                                                    <td> 
                                                        <telerik:RadMenu ID="mnuForumsTop" runat="server" DataSourceID="sitemapForum" Skin="WtoForumsTop" 
                                                            EnableEmbeddedSkins="false" /> 
                                                        <asp:SiteMapDataSource ID="sitemapForum" runat="server" SiteMapProvider="forumTopMenu" /> 
                                                    </td>                                                
                                                </tr> 
                                            </table> 

    And Thnks
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 30 Dec 2008 Link to this post

    Hi Mohammed,

    Please use the following styles to align the menus to the right:

    <style type="text/css">  
        div.RadMenu {  
            float: right;  
        }  
    </style> 

    Best regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. rh
    rh avatar
    193 posts
    Member since:
    Jan 2007

    Posted 12 Aug 2009 Link to this post

    Float won't work because it screws up the layout in firefox because firefox div elements don't respect items inside it that float. So, yeah, it makes the menu align right but messes up the layout of the page in firefox.
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 14 Aug 2009 Link to this post

    Hello,

    You can use "clear: both" css property in order to fix this issue in Firefox:

    <div> 
        <telerik:RadMenu ID="RadMenu1" runat="server"
            <Items> 
                <telerik:RadMenuItem Text="item 1" /> 
                <telerik:RadMenuItem Text="item 2" /> 
                <telerik:RadMenuItem Text="item 3" /> 
            </Items> 
        </telerik:RadMenu> 
        <br style="clear: both" /> 
     </div> 

    If this doesn't help, please send us a live url where we could observe the problem.

    Best regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Kim
    Kim avatar
    23 posts
    Member since:
    Dec 2012

    Posted 11 Sep 2013 Link to this post

    Hi,

    How can I make this work if i have two menus on a page and only want one to float right? This code makes both float right.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Sep 2013 Link to this post

    Hi Kim,

    Please have a look at the following code that I have tried to align RadMenu.

    ASPX:
    <telerik:RadMenu ID="RadMenu1" runat="server">
        <Items>
            <telerik:RadMenuItem Text="Item1.1" runat="server">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item1.2" runat="server">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
    <br />
    <telerik:RadMenu ID="RadMenu2" runat="server" CssClass="Radmenu2">
        <Items>
            <telerik:RadMenuItem Text="Item2.1" runat="server">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item2.2" runat="server">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    CSS:
    <style type="text/css">
        div.RadMenu
        {
            float: right;
        }
        .Radmenu2
        {
            float:left !important;
        }
    </style>

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