Context menu placement in Chrome and Opera

[George]

I have many context menus that used to work just fine.  At one time I positioned them myself taking scroll into account (complicated) but then I changed to Telerik and the nice Telerik context menu placed them nicely itself as it should.

Now, when the main window is scrolled the context window displays without the scroll distances added - so it shows above the click. This error happens in Chrome and Opera, but it works fine in Safari, and Edge.  It used to work fine in Chrome, just noticed it does not now.

I simply use contextMenu.show(event); on a to display the RadContextMenu.  They all happen on a button click called to a javascript to show the RadContextMenu,

<asp:Button ID="AddFormRowButton"  CssClass="btn btn-default menubutton" runat="server" Text="Add Form Row ≡"
    OnClientClick="return ShowAddFormRow(event);" UseSubmitBehavior="False"/>

function ShowAddFormRow(event) {
    var contextMenu = $find("<%= FormAddRowMenu.ClientID %>");
    if ((!event.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), event.relatedTarget))) {
       contextMenu.show(event);
    }
    else {
        alert("Event error");
    }
    return false;
}

 

 

Any idea if this has been noted and when it might be fixed.

[Rumen]

Hi George,

This is a known issue in the new version of Google Chrome 61. There is a sticky note about the problem and how to solve it: Wrong placement of RadContextMenu and RadTooltip in Chrome 61. 

Please, test the solution and let me know how it works for your scenario.

Best regards,
Rumen
Progress Telerik

[George]

It fixed the problem in Chrome, but it still happens in Opera (48 the lastest, it auto-updates as does Chrome I guess).  Browsers can be quite the moving targets.

Any idea when the R3 2017 SP1 release is expected?

Regardless, thanks for the Chrome fix.

George

[Rumen]

Hello,

For Opera, I'd like to suggest the highlighted check (|| (Telerik.Web.Browser.opera && Telerik.Web.Browser.version >= 48)) below:

        <div style="height:1500px"></div>
        <telerik:RadContextMenu ID="FormAddRowMenu" runat="server">
            <Items>
                <telerik:RadMenuItem Text="Item1"></telerik:RadMenuItem>
            </Items>
        </telerik:RadContextMenu>
        <asp:Button ID="AddFormRowButton" CssClass="btn btn-default menubutton" runat="server" Text="Add Form Row ≡"
            OnClientClick="return ShowAddFormRow(event);" UseSubmitBehavior="False" />
        <script>
            function ShowAddFormRow(event) {
                var contextMenu = $find("<%= FormAddRowMenu.ClientID %>");
            if ((!event.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), event.relatedTarget))) {
                contextMenu.show(event);
            }
            else {
                alert("Event error");
            }
            return false;
        }

    $telerik.getViewPortSize = function () {
        var width = 0;
        var height = 0;

        var canvas = document.body;

        if ((!$telerik.quirksMode && !$telerik.isSafari) ||
            (Telerik.Web.Browser.chrome && Telerik.Web.Browser.version >= 61) || (Telerik.Web.Browser.opera && Telerik.Web.Browser.version >= 48)) {
            canvas = document.documentElement;
        }

        if (window.innerWidth) {
            // Seems there's no completely reliable way to get the viewport size in Gecko, this should be the best one
            // Check https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7
            width = Math.max(document.documentElement.clientWidth, document.body.clientWidth);
            height = Math.max(document.documentElement.clientHeight, document.body.clientHeight);

            if (width > window.innerWidth)
                width = document.documentElement.clientWidth;
            if (height > window.innerHeight)
                height = document.documentElement.clientHeight;
        }
        else {
            width = canvas.clientWidth;
            height = canvas.clientHeight;
        }

        width += canvas.scrollLeft;
        height += canvas.scrollTop;

        if ($telerik.isMobileSafari) {
            width += window.pageXOffset;
            height += window.pageYOffset;
        }

        return { width: width - 6, height: height - 6 };
    }
</script>

Let me know how it works on your end.

The next official release date is not yet decided. 

Kind regards,
Rumen
Progress Telerik

[George]

That worked for Opera.   Now I'll have to remember to test it on the next update to see if the workaround can be removed.

Thanks,
George

[Rumen]

Hi George,

That's great. You can add a reminder in your calendar and let me know how the control works after testing it :)

Have a nice day/evening,
Rumen
Progress Telerik