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

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

4 Answers 45 Views
Editor
This is a migrated thread and some comments may be shown as answers.
@CC
Top achievements
Rank 1
@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">
 
<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

Sort by
0
Rumen
Telerik team
answered on 07 Jul 2011, 09:43 AM
Hi,

We are familiar with the problem and it is already logged for fixing in our bug tracking system. The Public Url is http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/3856.

You should not experience the problem if the ContentAreaMode property is set to IFRAME.

Best regards,
Rumen
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

0
Naman
Top achievements
Rank 1
answered on 01 Apr 2015, 01:33 PM
Hi Rumen,

The link you provided for the bug tracking ticket does not work, it takes me to the Support and Learning page. Was this issue fixed?
I have come across the exact same issue where my web page uses multiple RadEditors, and on right-click, the context menu opens on top of the page. This issue is only in IE.

Setting the ContentAreaMode to IFRAME does get rid of this problem but my RadEditors need to use ContentAreaMode DIV.

Thanks,
Naman
0
Naman
Top achievements
Rank 1
answered on 01 Apr 2015, 01:34 PM
Correction: This issue happens only in IE9
0
Ianko
Telerik team
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.

 
Tags
Editor
Asked by
@CC
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Naman
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or