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

Context Menu positioning with multiple editors and ContentAreMode="div"

4 Answers 81 Views

Editor

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

@CC asked on 05 Jul 2011, 05:52 PM

I have come across a problem where the position of the pop-up context menu seems to be affected by the scroll position of the browser. On a page with multiple RadEditors where the user must scroll to get to the bottom few editors, the context menu popup position gets higher the further down the page the user right-clicks a RadEditor. It is also affected by the amount of content in each editor when AutoResizeHeight="true". I want the appearance of "textbox-like RadEditors" as per the online demo, so the css classes in my sample below are similar to the online demo. Removing ContentAreaMode="div" seems to alleviate the problem, but I haven't fully tested my project without that setting. I am using the latest release build and IE9.

Sample:

<!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">

<title>Test Telerik boxes</title>

<style type="text/css">

/* The following CSS needs to be copied to the page to produce textbox-like RadEditor */

.reWrapper_corner, .reWrapper_center, .reToolZone,

.reToolCell,

.reBottomZone,

.reModule

{

display: none !important;

}

.reLeftVerticalSide,

.reRightVerticalSide

{

background: white !important;

}

.reContentCell

{

border-width: 0 !important;

width:100%;

}

</style>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="true" OutputCompression="AutoDetect" >

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

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

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

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

</Scripts>

</telerik:RadScriptManager>

<div> </div><div> </div>

<div>1:</div>

<div>

<telerik:RadEditor ID="RadEditor0" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

<Content></Content>

</telerik:RadEditor>

</div>

<div> </div><div> </div>

<div>2:</div>

<div>

<telerik:RadEditor ID="RadEditor1" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div> </div><div> </div>

<div>3:</div>

<div>

<telerik:RadEditor ID="RadEditor2" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>4:</div>

<div>

<telerik:RadEditor ID="RadEditor3" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>5:</div>

<div>

<telerik:RadEditor ID="RadEditor4" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>6:</div>

<div>

<telerik:RadEditor ID="RadEditor5" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>7:</div>

<div>

<telerik:RadEditor ID="RadEditor6" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>8:</div>

<div>

<telerik:RadEditor ID="RadEditor7" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>9:</div>

<div>

<telerik:RadEditor ID="RadEditor8" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>10:</div>

<div>

<telerik:RadEditor ID="RadEditor9" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>11:</div>

<div>

<telerik:RadEditor ID="RadEditor10" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>12:</div>

<div>

<telerik:RadEditor ID="RadEditor11" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>13:</div>

<div>

<telerik:RadEditor ID="RadEditor12" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>14:</div>

<div>

<telerik:RadEditor ID="RadEditor13" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>15:</div>

<div>

<telerik:RadEditor ID="RadEditor14" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>16:</div>

<div>

<telerik:RadEditor ID="RadEditor15" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>17:</div>

<div>

<telerik:RadEditor ID="RadEditor16" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

<div>18:</div>

<div>

<telerik:RadEditor ID="RadEditor17" runat="server"

EditModes="Design" AutoResizeHeight="true"

ContentAreaMode="Div" Height="30px" ToolsWidth="685px">

</telerik:RadEditor>

</div>

</form>

</body>

</html>

4 Answers, 1 is accepted

answered on 06 Apr 2015, 05:05 AM

Hi Naman,

The posted messaged below are quite old, therefore, it is more likely the case to be closed.

When it comes to the context menus, you should note that their appearance depend on the node selected. With DIV mode, the main context menu may not show up because the browser provides different tag name of the selected element.

I suggest you to further configure the context menu as described in this help article—
http://www.telerik.com/help/aspnet-ajax/editor-context-menus.html. This way you will be able to control which menu to appear on selecting the elements inside the content area.

Regards,
Ianko
Telerik

See What's Next in App Development. Register for TelerikNEXT.