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