Problem with Menu with IE 8 without Compatibility View

4 posts, 0 answers
  1. DW Web Team Member
    DW Web Team Member avatar
    43 posts
    Member since:
    Jun 2012

    Posted 02 Mar 2010 Link to this post

    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?
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 03 Mar 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. DW Web Team Member
    DW Web Team Member avatar
    43 posts
    Member since:
    Jun 2012

    Posted 03 Mar 2010 Link to this post

    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> 
     


  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 04 Mar 2010 Link to this post

    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.
Back to Top