Completed
Last Updated: 04 Dec 2017 09:54 by Anatoliy
ADMIN
Rumen
Created on: 21 Sep 2017 12:12
Category: UI for ASP.NET AJAX
Type: Bug Report
5
Wrong placement (position) of RadContextMenu in Chrome 61
Problem:

With the latest version of Chrome 61 the context menu is not positioning correctly in the treeview. It only happens when the treeview is longer than the window height and there are scrollbars. The EnableScreenBoundaryDetection should be enabled too (it is enabled by default).

Reproduction: see this video for a repro https://www.screencast.com/t/Reehai09gMP. The problem does not happen in the Chrome versions prior 61.

Details and Resolution: 

The context menu positioning problem is due to the following breaking change in Chrome 61 (see release notes at https://blog.chromium.org/2017/08/chrome-61-beta-javascript-modules.html):

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.

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;
            viewPortSize.width += document.body.scrollLeft;
        }
        else if (Telerik.Web.Browser.chrome) {
            viewPortSize.height += Math.max(document.body.scrollTop, document.scrollingElement.scrollTop);
            viewPortSize.width += Math.max(document.body.scrollLeft, document.scrollingElement.scrollLeft);
        }
  
        return viewPortSize;
    };
</script>
<telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server">
    <ContextMenus>
        <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1"runat="server"  RenderMode="Lightweight">
            <Items>
                ...


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.

The issue is scheduled for fixing in R3 2017 SP1, the release date of which is not yet decided. Please use the provided solutions above until the SP1 goes out officially.
3 comments
Anatoliy
Posted on: 04 Dec 2017 09:54
Sorry, Opera still have troubles!
Anatoliy
Posted on: 04 Dec 2017 09:27
How to use first solution for RadSchedule contextmenu?

Case: ReferenceError: Telerik is not defined
Find solution at https://www.telerik.com/forums/telerik-is-not-defined-2fdf84f8c6c7#DlOhlVIZx0Glev3mPVJQ1g
Alexandre
Posted on: 26 Sep 2017 18:24
I had to change the if(Telerik.Web.Browser.chrome) to if(Telerik.Web.Browser.chrome && (document.scrollingElement !== document.body)), otherwise the context menu was not correctly placed in chrome versions prior to 61.