Context Menu placement problem in Chrome

[Mark Kucera]

I seem to have this problem with my context menu, but only in Chrome.  In FF it displays just fine, but in Chrome it displays all the way at the bottom of the screen.  Please see the attached FF and Chrome screenshots from the same identical page.  i looked at the markup using inspector and it seems that in Chrome there are hard coded left, and top coordinates that are placing the menu at the bottom of the page.  where do these come from and how can this behavior be corrected?

Thanks!
-Mark

[Shinu]

Hi Mark Kucera,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

ASPX:

<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Icon-small.jpg" />
<telerik:RadContextMenu ID="RadContextMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem Text="New">
        </telerik:RadMenuItem>
    </Items>
    <Targets>
        <telerik:ContextMenuControlTarget ControlID="Image1" />
    </Targets>
</telerik:RadContextMenu>

Please provide your code if it doesn't help.
Thanks,
Shinu.

[Mark Kucera]

Thanks, I'll triple check it again this morning.  But my question was really not about you being able to replicate the problem.  i can replicate the problem as can all my users.  I know that it's getting placed where it is because of the hard coded top and left css parameters.  My questions really is how are those values being determined and what might cause it to calculate the wrong value.

Thanks!
-Mark

[Shinu]

Hi,

You can use the showAt() method of RadContextMenu to display the menu as a pop-up at the coordinates specified by the parameters. When calling showAt from in response to a client side event, it is better to call $telerik.cancelRawEvent(event) afterwards in order to prevent the default event processing from hiding the context menu displayed. Please take a look into this online demo.

Thanks,
Shinu.

[Rodrigo]

Hello Shinu,

If you scroll down your page you will get it.

Thanks, 

Rodrigo

[PSNTeam]

This is definitely a bug. I have taken screenshots of the problem using the demo page: http://i.imgur.com/E2CzUSz.png

If you are a chrome user the box displays at a different elevation depending on how far you are from the top of the screen.

[Helen]

Hello all,

We are aware of the issue and it is already fixed. The fix will be available next week as part of Telerik UI SP2.

Thank you for your time and understanding.


Regards,
Helen
Telerik

[Rodrigo]

Hello,

Is the fix already available?

Thanks,

Rodrigo

[Helen]

Hello,

Yes, it is already available. You may check our demos:

http://demos.telerik.com/aspnet-ajax/menu/examples/contextmenu/default/defaultcs.aspx



Regards,
Helen
Telerik

[Rodrigo]

Hello Helen,

How do I get the fix? My telerik version is the RadControls for ASP.NET AJAX Q3 2013.

Thanks,

Rodrigo

[Mark Kucera]

I can confirm that the issue i originally reported has been fixed in Chrome in 2013.3.1324.40.

Thanks everyone!
-Mark

[Helen]

Hi all,

The fix is part of the Q3 2013 SP2 - 2013.3.1324. Release history is available here:

http://www.telerik.com/support/whats-new/aspnet-ajax/release-history/q3-2013-sp2


Regards,
Helen
Telerik

[Rodrigo]

Hi Helen,

Thanks for sending the link.
I suppose that changing the RadContextMenuScripts.js will fix the error. However, I'm using the CdnSettings-TelerikCdn option which gets the scripts from http://aspnet-scripts.telerikstatic.com/ajaxz/2012.1.411/.
Therefore, can someone help me out on this? How can this new file in this situation? 

Thank you again,

Rodrigo

[Marcelo]

Hello Helen,

I found that if I disabled the CdnSettings-TelerikCdn, add <asp:ScriptReference Path="~/js/Core.js" /> on the RadScriptManager, and add EnableEmbeddedScripts="false" on the RadContextMenu it will work as it should and was before chrome last update. However, I really don't want to disable the CdnSettings-TelerikCdn, which works pretty well on my application. So, is there any possibility that Telerik will update the Core.js file for my control version for instance?

Thanks,

Rodrigo

[Marin Bratanov]

Hello,

Chrome 32 is supported by our Q3 2013 SP2 release and the fix for the chrome breaking change is quite a complex one, it cannot be easily taken out and plugged into an old version.
To get this fix I strongly advise that you upgrade to Q3 2013 SP2.

You can also try using the simple override from this thread, but I cannot guarantee it will help.

Regards,
Marin Bratanov
Telerik

[Marcelo]

Marin,

The script fixed my problem!

Thanks,

Rodrigo

[TD]

Telerik Version R2 2017 have a simular problem in Chrome Version 62.0.3202.18.

 

On a large page the context menu is displayed outside visible area when the page is scrolled down or to the right.

 

No problems in FF, IE

 

The javascript fix does not work.

 

[Scott]

I agree, this problem has re-surfaced in Chrome 61.0.3163.91.  It was easy to see...users that had Chrome 60 were fine.  As soon as they upgraded to build 61, it is incorrectly located.  I could see it happening in the Chrome Canary dev channel ahead of time, but was hoping it would work itself out by the time the official Chrome build hit general users.  However, it was not and is causing problems.  Help!  As TD mentioned above, it does work correctly in FF, IE, Edge, and Opera.

[Rumen]

Hello,

After investigating the incorrect positioning problem of the context menu in Chrome 61, it appeared that it is due to the following breaking change of 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 that we propose:

Solution 1
Place the following override over the RadTreeView/RadContextMenu 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 this problem in R3 2017 SP1, the release date of which is not yet decided.


Best regards,
Rumen
Progress Telerik

[TD]

Hi,

Solution 1 works vertically, but not if the viewport is scrolled horizontal.

Best Regards

 

[TD]

With this modification it works horizontal and vertical. Tested in Chrome 61, FF, Edge, Safari and IE 11.

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;
    };

 

Thanks

 

 

[Rumen]

Hi Thomas,

Thank you for sharing this improvement. I've updated your Telerik points and the sticky note.

Best regards,
Rumen
Progress Telerik

[Rumen]

Hi there,

I want to inform you that the sticky note has been updated with code that prevents not only the known positioning problems with RadContentMenu in Chrome 61, but also positioning problems with RadGrid ContentMenu, its dropdowns, column resizing and RadTooltip.

Here is the new override:

<script>
    $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)) {
            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>

Please test the new solution and share how it works in your project and scenario.

Thank you!

Best regards,
Rumen
Progress Telerik