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

RadMenu and Dock problem

3 Answers 101 Views

Dock

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

3 Answers, 1 is accepted

answered on 03 Jun 2010, 09:25 AM

Hi Farshad,

Please note that this is expected behavior. The menu is rendered as a <div/> element with position: absolute, and the dock's content container is a <div/> with overflow: auto. If the height of the inner <div/> (i.e. the menu is the inner <div/>) is greater than its parent <div/>, the scrollbar will be shown. To demonstrate this I created a sample that uses two <div/>s with the same CSS that is applied to the dock and the menu. The code is pasted below.
You can use some of the following suggestions to avoid the issue:

Set the height of the dock, so it is always greater than the one of the menu.
Handle the OnClientItemOpening and OnClientItemClosed client-side events of the menu, and set overflow: visible and overflow: auto to the menu's parent node. This, however, will make all content within the dock, hidden by the scroll bar, to be shown also.
Handle the OnClientItemOpening and OnClientItemClosed client-side events of the menu, and append the menu <div/> to the parent element of the dock, and place it at the same position as it would appear in the dock. You will find an example demo in the code below.

<%@ 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 id="Head1" runat="server">

<title></title>

<script type="text/javascript">

var position = null;

var top = null;

var left = null;

var originalParent = null;

function OnClientItemOpening(menu, args)

{

var dock = $find("RadDock1");

dock.set_enableDrag(false);

var menuElement = menu.get_element();

originalParent = menuElement.parentNode;

var parent = dock.get_element().parentNode;

parent.appendChild(menuElement);

position = menuElement.style.position;

top = menuElement.style.top;

left = menuElement.style.left;

menuElement.style.position = "absolute";

menuElement.style.top = 31 + dock.get_top();

menuElement.style.left = 11 + dock.get_left();

}

function OnClientItemClosed(menu, args)

{

var dock = $find("RadDock1");

dock.set_enableDrag(true);

var menuElement = menu.get_element();

menuElement.style.position = position;

menuElement.style.top = top;

menuElement.style.left = left;

originalParent.appendChild(menuElement);

}

</script>

</head>

<body>

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

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

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

</Scripts>

</asp:ScriptManager>

<div style="width: 400px; height: 100px; position: absolute; overflow: auto; border: 1px solid red;

left: 600px;">

<div style="background: green; border: 2px solid black; width: 200px; height: 200px;

position: absolute; overflow: hidden; z-index: 1000;">

</div>

<div>

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

<telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">

<telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"

Height="60px">

<ContentTemplate>

<telerik:RadMenu ID="Menu1" runat="server" ClickToOpen="true" OnClientItemOpening="OnClientItemOpening"

OnClientItemClosed="OnClientItemClosed">

<Items>

<telerik:RadMenuItem Text="Item1">

<Items>