Centering Menu Items No Longer Working

[Robert Verderber]

I just upgraded a project I have from the previous version of RAD Controls from 2008 Q3 to 2009 Q1. It seems to have broken the menu item on my page but I'm really not sure why. The to different version seem to render the identical html, but they do not render the same anymore. I think this may have something to do with the new sking format but I really dont have a clue. I have code behind that add and id parameter to the anchor tag of each menu item (to access them from some javascript). I have also added a css class to each menu item to center the text of the menu item in the anchor tag. The version of my page using the newer control will not center the text. 

below if the html rendered by each of the controls 

<!-- 2008.3.1314.35 -->

<ul class="rmHorizontal rmRootGroup">

<li class="rmItem rmFirst" style="width:19%;"><a href="#" class="rmLink menuItem ActiveNav" id="navHome"><span class="rmText">Home</span></a></li>

<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navAbout"><span class="rmText">About Us</span></a></li>

<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navLearn"><span class="rmText">Learn</span></a></li>

<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navShare"><span class="rmText">Share</span></a></li>

<li class="rmItem rmLast" style="width:19%;"><a href="#" class="rmLink menuItem" id="navGetStarted"><span class="rmText">Get Started</span></a></li>

</ul>

<!-- 2009.1.311.35 -->

<ul class="rmHorizontal rmRootGroup">

<li class="rmItem rmFirst" style="width:19%;"><a href="#" class="rmLink menuItem ActiveNav" id="navHome"><span class="rmText">Home</span></a></li>

<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navAbout"><span class="rmText">About Us</span></a></li>

<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navLearn"><span class="rmText">Learn</span></a></li>

<li class="rmItem" style="width:20%;"><a href="#" class="rmLink menuItem" id="navShare"><span class="rmText">Share</span></a></li>

<li class="rmItem rmLast" style="width:19%;"><a href="#" class="rmLink menuItem" id="navGetStarted"><span class="rmText">Get Started</span></a></li>

</ul>

</div>

and the menuItem css class I added

/* Navigation */

.menuItem, .menuItem a, .menuItem a span, .menuItem a:hover

{

color: silver;

cursor: pointer;

font-family: arial;

font-size: 12pt;

outline: none;

text-align: center;

text-decoration: none;

}

.ActiveNav

{

color: White;

font-weight: bold;

}

Any ideas as to why the controls are rendering totally different with the same html and css file? There is no skin selected so I didn't think it had to do with the new skin css format. 

Thanks,

Robert

[Alex Gyoshev]

Hello Robert,

With the Q1 release, there were numerous skin changes; therefore, you need the following CSS (instead of your old one):

div.RadMenu .rmItem
{
    padding: 0;
}

div.RadMenu .rmLink,
div.RadMenu .rmText
{
    float: none;
    text-align: center;
}

Then, you could also set the width of the items to 20% without making them wrap. These styles will work across all skins.

If you wish to revert to the old look of the controls (as we changed the default skin as well), you could refer to the following forum post.

All the best,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[KlaatuMcGoo]

I experienced the same thing as Robert.  Note: in my case, the problem happens only on the root node.  My menu has one root node w/text "Menu".  Under 2008 Q3, this rendered in a rectangular box, with Menu centered in the box.  After loading 2009 Q1, the rectangle looks truncated with the "Menu" appearing right-justified in the box, it looks bad.  I tried IE6-8, Chrome, FF, Opera, all rendering the same.  The "Menu" text seems to appear in the same absolute position, but the rectangle is shortened on the right side.  Adding the CSS suggested by Admin did not make any difference in how it renders.  When I removed Flow="Vertical" from the telerik:RadMenu tag, that fixed it.  However, I really wanted to use vertical flow on my menu.  The skin doesn't seem to make a difference; and I am using only the built-in skins.  I am not using custom skins.  I successfully reproduced the issue creating a tiny new project using the "RadControls VB.NET WebSite" Visual Studio 2008 template.  I am using VS 2008 SP1 w/MS Silverlight support for VS installed prior to loading 2009 Q1.  (Not that the SL support should make any difference.)  Here is what my sample looks like.  Notice the difference in rendering when you remove Flow="Vertical".

-James

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
 <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
 </telerik:RadAjaxManager>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    <div>
        <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Vista" Flow="Vertical">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Menu">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" IsSeparator="True"
                            Text="Child RadMenuItem 2">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>
    </form>
</body>
</html>

[KlaatuMcGoo]

Just saw the disclaimer about support not tracking down updates, so here are the changs to my post:

Note: in my case, the problem happens only on the root node.  

Also, here is a more readable default.aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
 <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
 </telerik:RadAjaxManager>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    <div>
        <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Vista" Flow="Vertical">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Menu">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" IsSeparator="True"
                            Text="Child RadMenuItem 2">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>
    </form>
</body>
</html>

[Alex Gyoshev]

Hello James,

Thank you for the report. We fixed the issue, and the fix will be included from the next internal build (and of course, in the SP1).

Your Telerik points have been updated.

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Matthew Bishop]

Opps, posted in the wrong thread and now I cant delete it :/

Can we get a delete button in the forums?