ContextMenu not positioned at node in Chrome latest update

3 posts, 1 answers
  1. Christian Devita
    Christian Devita avatar
    34 posts
    Member since:
    Jun 2005

    Posted 20 Sep Link to this post

    Chrome's latest update version 61 has created a bug in the display of the contextmenu of the radtreeview. 

     

    The scenario occurs when the treeview is the only element on the page and its content is bigger than the window it is in and the browser's native scrollbars are present. When scrolling down to items past the initial set in the viewport the context menu does not appear next to the node you click instead getting stuck at the bottom of the last node that can be seen without scrolling. In my app I have a treeview in a RadWindow but I found the same behavior with a treeview in a standard webform.

    I've tested this in the demo example of contextmenu for treeview. The attached project is the same code as the demo and if you run it, expand all the nodes and make the browser window smaller than the treeview content so scrollbars appear, and right click the bottom nodes you will see the context menu not positioned by the node you clicked.

     

    Any ideas for a workaround?

  2. Christian Devita
    Christian Devita avatar
    34 posts
    Member since:
    Jun 2005

    Posted 20 Sep in reply to Christian Devita Link to this post

    Code:

     

     


    <%@ Page AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TreeViewTest.Default" %>


    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
            <script type="text/javascript" src="scripts.js"></script>
            <div class="demo-container size-thin">
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
                </telerik:RadAjaxLoadingPanel>
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                    <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" AllowNodeEditing="true" OnContextMenuItemClick="RadTreeView1_ContextMenuItemClick"
                        OnClientContextMenuItemClicking="onClientContextMenuItemClicking" OnClientContextMenuShowing="onClientContextMenuShowing"
                        OnNodeEdit="RadTreeView1_NodeEdit">
                        <ContextMenus>
                            <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server"
                                enderMode="Lightweight">
                                <Items>
                                    <telerik:RadMenuItem Value="Copy" Text="Copy ..." ImageUrl="~/images/Outlook/10.gif">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="false" ImageUrl="~/images/Outlook/rename.gif"
                                        PostBack="false">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="NewFolder" Text="New Folder" ImageUrl="~/images/Outlook/12.gif">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="Delete" Text="Delete Folder" ImageUrl="~/images/Outlook/7.gif">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem IsSeparator="true">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="MarkAsRead" Text="Mark All as Read">
                                    </telerik:RadMenuItem>
                                </Items>
                                <CollapseAnimation Type="none"></CollapseAnimation>
                            </telerik:RadTreeViewContextMenu>
                            <telerik:RadTreeViewContextMenu ID="EmptyFolderContextMenu" runat="server">
                                <Items>
                                    <telerik:RadMenuItem Value="NewFolder" Text="New Folder" ImageUrl="~/images/Outlook/12.gif">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem IsSeparator="true">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="EmptyFolder" Text="Empty this folder" ImageUrl="~/images/Outlook/2DeletedItems.gif">
                                    </telerik:RadMenuItem>
                                </Items>
                                <CollapseAnimation Type="none"></CollapseAnimation>
                            </telerik:RadTreeViewContextMenu>
                        </ContextMenus>
                        <Nodes>
                            <telerik:RadTreeNode Value="_Private_PersonalFolders" ImageUrl="~/images/Outlook/1PersonalFolders.gif"
                                AllowEdit="false" Text="Personal Folders" Expanded="true">
                                <Nodes>
                                    <telerik:RadTreeNode Value="_Private_DeletedItems" ImageUrl="~/images/Outlook/2DeletedItems.gif"
                                        AllowEdit="false" Text="Deleted Items (79)" Font-Bold="true" ContextMenuID="EmptyFolderContextMenu">
                                        <Nodes>
                                            <telerik:RadTreeNode Text="Spam (33)" AllowEdit="true" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode Text="Old (46)" AllowEdit="true" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Value="_Private_Drafts" ImageUrl="~/images/Outlook/3Drafts.gif"
                                        AllowEdit="false" Text="Drafts (2)" Font-Bold="true">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Value="_Private_Inbox" ImageUrl="~/images/Outlook/4Inbox.gif"
                                        AllowEdit="false" Text="Inbox (23)" Font-Bold="true">
                                        <Nodes>
                                            <telerik:RadTreeNode Text="Family (1)" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode Text="Friends (2)" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode Text="Partners" ImageUrl="~/images/Outlook/folder.gif">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode Text="New Offers (8)" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode Text="Job candidates (12)" Font-Bold="true" ImageUrl="~/images/Outlook/folder.gif">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Value="_Private_JunkEmail" AllowEdit="false" Text="Junk Email (34)"
                                        Font-Bold="true" ImageUrl="~/images/Outlook/junk.gif" ContextMenuID="EmptyFolderContextMenu">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Value="_Private_OutBox" ImageUrl="~/images/Outlook/outbox.gif"
                                        AllowEdit="false" Text="Outbox">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Value="_Private_PublicFolders" ImageUrl="~/images/Outlook/folder.gif"
                                        AllowEdit="false" Text="Public folders (2)" Font-Bold="true">
                                        <Nodes>
                                            <telerik:RadTreeNode Text="Favorites" ImageUrl="~/images/Outlook/folder.gif">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode Text="All Public Folders (2)" ImageUrl="~/images/Outlook/folder.gif"
                                                Font-Bold="true">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Value="_Private_RssFeeds" AllowEdit="false" Text="RSS Feeds"
                                        ImageUrl="~/images/Outlook/rss.gif">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Value="_Private_SentItems" ImageUrl="~/images/Outlook/sent.gif"
                                        AllowEdit="false" Text="Sent Items">
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeView>
                </telerik:RadAjaxPanel>
            </div>
        </form>
    </body>
    </html>
  3. Answer
    Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 21 Sep Link to this post

    Hi Christian,

    Thank you for reporting this issue!


    After detailed investigation I found that the context menu positioning problem is due to the following breaking change in Chrome 61 (see release notes):

    To align with the spec and preserve browser consistency, the scrollingElement is now the documentElement in standards mode.

    Chrome 61 has changed the behavior of document.scrollingElement to return document.documentElement instead of document.body to match the CSSOM View specification and this broke the positioning of the context menu when the EnableScreenBoundaryDetection is enabled.


    Here are the solutions

    Solution 1
    Place the following override over the RadTreeView declaration:

    <script>  
        Telerik.Web.UI.RadMenu._getViewPortSize = function () {
            var viewPortSize = $telerik.getViewPortSize();
            // The document scroll is not included in the viewport size
            // calculation under FF/quirks and Edge.      
            var quirksMode = document.compatMode != "CSS1Compat";
            if (($telerik.isFirefox && quirksMode) || Telerik.Web.Browser.edge) {
                viewPortSize.height += document.body.scrollTop;
            }
            else if (Telerik.Web.Browser.chrome) {
                viewPortSize.height += Math.max(document.body.scrollTop, document.scrollingElement.scrollTop);
            }
            return viewPortSize;
        };
    </script>
    <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server">
        <ContextMenus>
            <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1"runat="server"  RenderMode="Lightweight">
                <Items>
                    ...


    Please test the solution in all browsers and let me know if there are any side effects. For your convenience I have attached the modified aspx file.

    Solution 2
    Set EnableScreenBoundaryDetection to false. This will disable the screen boundary detection and some parts of the context menu could be rendered beneath the browser borders when there isn't enough space to be rendered on the visible screen. You will have to use the browser scrollbars to show the hidden part of the menu.

    You can follow the following sticky note and bug report item for more information and details on the issue.

    You can expect a fix for it in R3 2017 SP1, the release date of which is not yet decided.

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top