Align RadMenu to the right

[Mohammed]

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

[Yana]

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.

[rh]

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.

[Yana]

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.

[Kim]

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.

[Shinu]

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.