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

RadMenu stays in a fixed position on the screen

4 Answers 265 Views

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

Alex Tushinsky asked on 08 Apr 2010, 04:22 PM

sc1-default-view-when-loaded-for-the-first-time.png

sc2-after-scrolling-the-page.png

I am having a problem with RadMenu staying in a fixed position on the screen. The problem seems to plague IE6, and IE7 (I haven't tested IE8). It does not affect FireFox or Chrome.

Basically, I have a page that uses RadPanes to split the screen into 3 parts (navigation - left side, main screen - right, footer - across the bottom). Within the main screen I have a table, which contains 2 rows, 1 cell each row. Top cell contains a RadMenu, and the bottom cell contains a RadTreeView.

                    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>         
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>         
            <!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">         
                <style type="text/css">            
                    html, body, form            
                    {            
                        height: 100%;            
                        padding: 0px;            
                        margin: 0px;            
                    }            
                </style>         
                <title></title>         
            </head>         
            <body>         
                <form id="form1" runat="server">         
                <div>         
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>         
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100%" HorizontalAlign="Center">         
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" HeightOffset="50" Height="100%" Width="100%" LiveResize="true" SplitBarsSize="4px" EnableEmbeddedBaseStylesheet="true" ResizeMode="EndPane">         
                        <!-- Left web -->         
                        <telerik:RadPane ID="RadPane_MainLeft" runat="server" Width="225" Scrolling="Both">         
                               Navigation goes here         
                        </telerik:RadPane>         
                        <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar>         
                        <!-- Right web -->         
                        <telerik:RadPane ID="RadPane_MainRight" runat="server" Scrolling="Y">                
                    <asp:Panel runat="server" ID="pnlEdit">         
                    <p>         
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl lorem, luctus id aliquet ut, luctus ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in diam lorem, quis rutrum risus. Pellentesque scelerisque orci eget eros luctus posuere. Morbi interdum semper diam non porttitor. Donec in orci sed odio eleifend dictum sed vitae leo. Morbi porttitor, ante et commodo aliquet, magna orci convallis mauris, eu pellentesque elit tortor et nulla. Donec non lacus orci. Vestibulum luctus metus a tellus blandit convallis. Donec suscipit, arcu hendrerit tempus blandit, nisl elit sollicitudin diam, a luctus mi sapien vel mi. Curabitur tempus hendrerit eros vulputate vulputate. Maecenas aliquam ultrices eros, id ornare lectus posuere eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus vehicula tempor leo eget facilisis. Suspendisse feugiat bibendum massa id semper. Etiam pellentesque eleifend tellus sed interdum. Maecenas pharetra risus ut velit molestie egestas. Sed vitae lacus mattis eros malesuada dignissim eget at diam. Curabitur sollicitudin lectus a felis gravida blandit. Cras quis augue in est facilisis convallis sit amet at dui.         
                    </p>         
                        <table width="100%" cellpadding="3" cellspacing="3"><tr><td align="left" valign="top" width="100%">         
                            <telerik:RadMenu ID="mnuSel" Runat="server">         
                                <Items>         
                                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">         
                                        <Items>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">         
                                            </telerik:RadMenuItem>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">         
                                            </telerik:RadMenuItem>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">         
                                            </telerik:RadMenuItem>         
                                        </Items>         
                                    </telerik:RadMenuItem>         
                                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">         
                                        <Items>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">         
                                            </telerik:RadMenuItem>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">         
                                            </telerik:RadMenuItem>         
                                        </Items>         
                                    </telerik:RadMenuItem>         
                                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">         
                                        <Items>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">         
                                            </telerik:RadMenuItem>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">         
                                            </telerik:RadMenuItem>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">         
                                            </telerik:RadMenuItem>         
                                        </Items>         
                                    </telerik:RadMenuItem>         
                                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem4">         
                                    </telerik:RadMenuItem>         
                                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem5">         
                                    </telerik:RadMenuItem>         
                                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem6">         
                                    </telerik:RadMenuItem>         
                                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem7">         
                                        <Items>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">         
                                            </telerik:RadMenuItem>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">         
                                                <Items>         
                                                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">         
                                                    </telerik:RadMenuItem>         
                                                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">         
                                                    </telerik:RadMenuItem>         
                                                </Items>         
                                            </telerik:RadMenuItem>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">         
                                            </telerik:RadMenuItem>         
                                        </Items>         
                                    </telerik:RadMenuItem>         
                                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem8">         
                                    </telerik:RadMenuItem>         
                                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem9">         
                                        <Items>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">         
                                            </telerik:RadMenuItem>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">         
                                            </telerik:RadMenuItem>         
                                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">         
                                            </telerik:RadMenuItem>         
                                        </Items>         
                                    </telerik:RadMenuItem>         
                                </Items>         
                                <DefaultGroupSettings RepeatColumns="2" RepeatDirection="Vertical" />         
                            </telerik:RadMenu>         
                        </td></tr>         
                        <tr>         
                        <td align="left" valign="top" width="100%"><telerik:RadTreeView ID="treeSel" Runat="server">         
                            <Nodes>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode3">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode4">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode5">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode6">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode7">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode8">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode9">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode10">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode11">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode12">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode13">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode14">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode15">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode16">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode17">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode18">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode19">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode20">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode21">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode22">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode23">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode24">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode25">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode26">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode27">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode28">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode29">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode30">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode31">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode32">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode33">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode34">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode35">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode36">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode37">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode38">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode39">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode40">         
                                </telerik:RadTreeNode>         
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode41">         
                                </telerik:RadTreeNode>         
                            </Nodes>         
                            </telerik:RadTreeView></td></tr>         
                        </table>         
                     </asp:Panel>         
                        </telerik:RadPane>         
                                 
                    </telerik:RadSplitter>         
                             
                    <!-- Footer -->         
                    <div style="height: 50px; text-align: center; background-color: White;">         
                                 
                        Footer goes here         
                                 
                    </div>         
                    </telerik:RadAjaxPanel>         
                </div>         
                </form>         
            </body>         
            </html>         
                     

When the page is scrolled, the RadMenu stays fixed and does not move within the screen. I've also experienced the RadMenu disappearing entirely, if placed at the top of the screen (to see that, remove the "<p>Lorem ipsum...</p>" content from the top of the page in my example above).

I've tried the following, with no success:

1 - set up a style with "position: absolute; z-index: 0;" and attached it to menu only, menu and tree, tree only. This did not help.

2 - tried setting up a "position: relative;" for each of the items. This had an even worse effect.

Any help in resolving this is greatly appreciated. I am attaching 2 screenshots that demonstrate the problem. I'm using the latest version of the Telerik controls.

Thanks,

Alex

4 Answers, 1 is accepted

Accepted

answered on 09 Apr 2010, 07:44 AM

Hello Alex,

Thank you for sending us the complete page. This is a well known issue in IE6 and IE7 and is fixed by applying position: relative to the scrolling container:

<telerik:RadPane ID="RadPane_MainRight" runat="server" Scrolling="Y" CssClass="menuPane">

<style type="text/css">

.menuPane

{

position: relative;

}

</style>

I hope this helps.

Kind regards,
Tsvetomir Tsonev
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.

answered on 29 Nov 2010, 02:31 PM

Hello,

I have the same problem, The radmenu is displayed in fixed position using IE.

My code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="DefaultMasterPage.master.cs" Inherits="Pages_MasterPages_DefaultMasterPage" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register src="~/Common/UserControls/GlobalizationUserControl.ascx" tagname="GlobalizationUserControl" tagprefix="uc3" %>

<%@ Register src="~/Common/UserControls/FooterMenuUserControl.ascx" tagname="FooterMenuUserControl" tagprefix="uc1" %>

<%@ Register src="~/Common/UserControls/HeaderWebUserControl.ascx" tagname="HeaderWebUserControl" tagprefix="uc2" %>

<%@ Register src="../UserControls/Advr/HeaderWebUserControl.ascx" tagname="HeaderWebUserControl" tagprefix="uc4" %><%@ Register src="../UserControls/Advr/MiddleAdvrWebUserControl.ascx" tagname="MiddleAdvrWebUserControl" tagprefix="uc5" %><%@ Register src="../UserControls/Advr/RightSideAdvrsWebUserControl.ascx" tagname="RightSideAdvrsWebUserControl" tagprefix="uc6" %><%@ Register src="../UserControls/Advr/FooterAdvrWebUserControl.ascx" tagname="FooterAdvrWebUserControl" tagprefix="uc7" %><%@ Register src="../UserControls/SingleMediaPlayerWebUserControl.ascx" tagname="SingleMediaPlayerWebUserControl" tagprefix="uc8" %>

<!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" runat="server" dir="<%$ Resources:Resource, PageDirection %>" >

<head runat="server">

<title>Untitled Page</title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

<link href="../../Common/css/StyleSheet.css" rel="Stylesheet" type="text/css" />

<style type="text/css">

html, body {

height: 100%;

overflow: auto;

}

body {

padding: 0;

margin: 0;

}

.ItemStyle

{

font-weight:bold;

}

</style>

</head>

<body id="body" style="margin-left:5; margin-top:5;">

<form id="form1" runat="server">

<div>

<a name="Top"></a>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<table align="center" border="0" cellspacing="1" cellpadding="1" style="background-color:White; width:952px;">

<tr>

<td align="center" valign="top" colspan="2">

<uc4:HeaderWebUserControl ID="HeaderWebUserControl2" runat="server" />

</td>

</tr>

<tr>

<td>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td align="right" valign="top" style="width:650px;">

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td>

<asp:ImageButton ID="ImageButton4" ImageUrl="~/Common/Img/Headers/HeaderImage.jpg" Width="100%" Height="180px" runat="server" />

</td>

</tr>

<tr>

<td>

<telerik:RadMenu ID="HeaderFirstRadMenu" CssClass="menuPane" Width="100%" Skin="Telerik"

runat="server">

<Items>

<telerik:RadMenuItem runat="server" ExpandedCssClass="ItemStyle" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsMain %>"

NavigateUrl="~/Default.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ExpandedCssClass="ItemStyle" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsConcerts %>"

NavigateUrl="~/Pages/Concerts/Default.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Visible="false" ExpandedCssClass="ItemStyle" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsClips %>"

NavigateUrl="~/Pages/Clips.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ExpandedCssClass="ItemStyle" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsPoems %>"

NavigateUrl="~/Pages/Poems/Default.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ExpandedCssClass="ItemStyle" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsDialogues %>"

NavigateUrl="~/Pages/Dialogues.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ExpandedCssClass="ItemStyle" Visible="false" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsBooks %>"

NavigateUrl="~/Pages/Books/Default.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ExpandedCssClass="ItemStyle" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsNews %>"

NavigateUrl="~/Pages/News/Default.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ExpandedCssClass="ItemStyle" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsRgstr %>"

NavigateUrl="~/registration-login/Pages/Registration.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ExpandedCssClass="ItemStyle" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsLogin %>"

NavigateUrl="~/registration-login/Login.aspx">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" NavigateUrl="~/Forums/Pages/Threads.aspx" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsForums %>">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" ExpandedCssClass="ItemStyle" Font-Size="12pt" Font-Bold="true" Text="<%$ Resources:Resource, PagesUserControlsHeaderWebUserControlMenuItemsBlog %>"

NavigateUrl="">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</td>

</tr>

</table>

</td>

<td align="right" valign="top" style="width:4px;">

</td>

<td align="left" valign="top" style="width:298px;">

<uc8:SingleMediaPlayerWebUserControl ID="SingleMediaPlayerWebUserControl1"

runat="server" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="center" valign="top" class="style1" colspan="2">

<uc5:MiddleAdvrWebUserControl ID="MiddleAdvrWebUserControl1" runat="server" />

</td>

</tr>

<tr>

<td>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td align="right" valign="top" style="width:106px;">

<uc6:RightSideAdvrsWebUserControl ID="RightSideAdvrsWebUserControl1"

runat="server" />

</td>

<td align="right" valign="top" style="width:846px;">

<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">

</asp:ContentPlaceHolder>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="right" valign="top" class="style2" colspan="2">

<uc1:FooterMenuUserControl ID="FooterMenuUserControl1" runat="server" />

</td>

</tr>

<tr>

<td align="center" valign="top" class="style2" colspan="2">

<uc7:FooterAdvrWebUserControl ID="FooterAdvrWebUserControl1" runat="server" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Please, I need your help in order to make the radmenu displayed in its position.
It is appreciated to send me the modified code.

Regards,
Bader

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadMenu stays in a fixed position on the screen

4 Answers, 1 is accepted