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

5 posts, 0 answers
  1. @CC
    @CC avatar
    6 posts
    Member since:
    Jun 2008

    Posted 05 Jul 2011 Link to this post

    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>

  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 07 Jul 2011 Link to this post

    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!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Naman
    Naman avatar
    6 posts
    Member since:
    Feb 2015

    Posted 01 Apr 2015 Link to this post

    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
  5. Naman
    Naman avatar
    6 posts
    Member since:
    Feb 2015

    Posted 01 Apr 2015 in reply to Naman Link to this post

    Correction: This issue happens only in IE9
  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 06 Apr 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017