Context menu placement in Chrome and Opera

6 posts, 1 answers
  1. George
    George avatar
    89 posts
    Member since:
    Oct 2014

    Posted 10 Oct Link to this post

    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, Firefox 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.

  2. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 11 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. George
    George avatar
    89 posts
    Member since:
    Oct 2014

    Posted 11 Oct in reply to Rumen Link to this post

    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

  4. Answer
    Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 16 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. George
    George avatar
    89 posts
    Member since:
    Oct 2014

    Posted 16 Oct in reply to Rumen Link to this post

    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

  6. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 16 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular 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