This is a migrated thread and some comments may be shown as answers.

Align RadMenu to the right

5 Answers 406 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Mohammed
Top achievements
Rank 1
Mohammed asked on 29 Dec 2008, 04:30 PM
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

5 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 30 Dec 2008, 10:05 AM
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.
0
rh
Top achievements
Rank 1
answered on 13 Aug 2009, 04:51 AM
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.
0
Yana
Telerik team
answered on 14 Aug 2009, 11:59 AM
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.
0
Kim
Top achievements
Rank 1
answered on 11 Sep 2013, 04:11 PM
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.
0
Shinu
Top achievements
Rank 1
answered on 13 Sep 2013, 03:51 AM
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.
Tags
Menu
Asked by
Mohammed
Top achievements
Rank 1
Answers by
Yana
Telerik team
rh
Top achievements
Rank 1
Kim
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or