[Solved] Problem with Menu with IE 8 without Compatibility View

[DW Web Team Member]

I am using Q3 2009 version of the controls. The menu works fine if I run it in Compatibility View. As soon as I deselect Compatibility View, submenus are not shown up. And it does not work in Firefox or Chrome. By the way, it worked fine with Q2 2009. Here is my code:

<%@ Control Language="C#" AutoEventWireup="true" Codebehind="NavigationUC.ascx.cs" Inherits="TelerikTesting.UserControls.NavigationUC" %> <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> <style type="text/css"> .RadPanelBar, .RadPanelBar .rpSlide, .RadPanelBar .rpGroup, .RadPanelBar .rpTemplate { overflow:visible !important; } div.RadPanelBar .rpLevel1 .rpItem { padding:0; } div.RadMenu .rmRootGroup { border: 0; } div.RadMenu .rmLink { float: none; } </style> <telerik:RadPanelBar ID="RadPanelbar1" runat="server"

Width="100%" EnableViewState="false" EnableEmbeddedSkins="false">

<Items>

<telerik:RadPanelItem Text="Menu 1" runat="server" Expanded="True" Width="100%">

<Items>

<telerik:RadPanelItem runat="server">

<ItemTemplate>

<telerik:RadMenu ID="rmMenu1" Width="99%" Flow="Vertical" runat="server"

EnableViewState="false" EnableEmbeddedSkins="false">

<Items>

<telerik:RadMenuItem Text="Schedules" NavigateUrl="~/ScheduleList.aspx" />

</Items>

</telerik:RadMenu>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Menu 2" runat="server" Expanded="True" Width="100%">

<Items>

<telerik:RadPanelItem runat="server">

<ItemTemplate>

<telerik:RadMenu ID="rmMenu2" Width="99%" Flow="Vertical" runat="server"

style="z-index:7000" EnableViewState="false" EnableEmbeddedSkins="false">

<Items>

<telerik:RadMenuItem Text="Menu 2 1">

<Items>

<telerik:RadMenuItem Text="Help 1" NavigateUrl="~/Help.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Help 2">

<Items>

<telerik:RadMenuItem Text="Help 2 1" NavigateUrl="~/Help.aspx">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu 2 2">

<Items>

<telerik:RadMenuItem Text="Help" NavigateUrl="~/Help.aspx" />

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

Any thoughts?

[Yana]

Hello,

Please add the following css styles to your page to fix this issue:

<style type="text/css">
      .RadPanelBar,
      .RadPanelBar .rpSlide,
     .RadPanelBar .rpGroup,
     .RadPanelBar .rpItem,
     .RadPanelBar .rpTemplate
        {
            overflow:visible !important;
        }

        div.RadPanelBar .rpLevel1 .rpItem
        {
            padding:0;
        }

        * html .RadPanelBar .RadMenu ul.rmRootGroup
        {
            zoom: 1;
        }

        div.RadMenu .rmRootGroup
        {
            border: 0;
        }

        div.RadMenu .rmLink
        {
            float: none;
        }
</style>

Regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[DW Web Team Member]

Thank you for the reply.
I already had most of those styles. The style I was missing was

 .RadPanelBar .rpItem

{

    overflow:visible !important;

}
I added it, and it did the trick in IE 8. Everything is working now in IE. However, the menu is still broken in Firefox and Chrome.
The code:

<%@ Control Language="C#" AutoEventWireup="true"
            Codebehind="NavigationUC.ascx.cs" Inherits="TelerikTesting.UserControls.NavigationUC" %>

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<style type="text/css">
    .RadPanelBar,
    .RadPanelBar .rpSlide,
    .RadPanelBar .rpGroup,
    .RadPanelBar .rpItem,
    .RadPanelBar .rpTemplate
    {
        overflow:visible !important;
    }

    div.RadPanelBar .rpLevel1 .rpItem
    {
        padding:0;
    }

    div.RadMenu .rmRootGroup
    {
        border: 0;
    }

    div.RadMenu .rmLink
    {
        float: none;
    }
</style>

<telerik:RadPanelBar ID="RadPanelbar1" runat="server"
        Width="100%" EnableViewState="false" EnableEmbeddedSkins="false">
    <Items>
        <telerik:RadPanelItem Text="Menu" runat="server" Expanded="True" Width="100%">
            <Items>
                <telerik:RadPanelItem runat="server">
                    <ItemTemplate>
                        <telerik:RadMenu ID="rmMenu" Width="99%" Flow="Vertical" runat="server"
                            style="z-index:7000" EnableViewState="false" EnableEmbeddedSkins="false">
                            <Items>
                                <telerik:RadMenuItem Text="Menu 1 1">
                                     <Items>
                                        <telerik:RadMenuItem Text="Help 1 1" NavigateUrl="~/Help.aspx">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Help 1 2">
                                             <Items>
                                                <telerik:RadMenuItem Text="Help 1 2 1" NavigateUrl="~/Help.aspx">
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                           </Items>
                        </telerik:RadMenu>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

[Yana]

Hello DW,

It works at our side also in Firefox and Chrome, but note that I test it with Default skin. You can also check this online example.

Best wishes,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.