This is a migrated thread and some comments may be shown as answers.
Context Menu placement problem in Chrome
22 Answers 87 Views
This is a migrated thread and some comments may be shown as answers.
Mark Kucera
Top achievements
Rank 1
Mark Kucera asked on 15 Jan 2014, 06:18 AM
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

22 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 15 Jan 2014, 08:34 AM
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.
0
Mark Kucera
Top achievements
Rank 1
answered on 15 Jan 2014, 01:10 PM
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
0
Shinu
Top achievements
Rank 1
answered on 16 Jan 2014, 03:59 AM
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.
0
Rodrigo
Top achievements
Rank 1
answered on 20 Jan 2014, 11:53 AM
Hello Shinu,

If you scroll down your page you will get it.

Thanks, 

Rodrigo
0
PSNTeam
Top achievements
Rank 2
answered on 20 Jan 2014, 05:29 PM
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.
0
Helen
Telerik team
answered on 21 Jan 2014, 07:25 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Rodrigo
Top achievements
Rank 1
answered on 30 Jan 2014, 05:14 PM
Hello,

Is the fix already available?

Thanks,

Rodrigo
0
Helen
Telerik team
answered on 03 Feb 2014, 09:17 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Rodrigo
Top achievements
Rank 1
answered on 03 Feb 2014, 12:03 PM
Hello Helen,

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

Thanks,

Rodrigo
0
Mark Kucera
Top achievements
Rank 1
answered on 03 Feb 2014, 04:17 PM
I can confirm that the issue i originally reported has been fixed in Chrome in 2013.3.1324.40.

Thanks everyone!
-Mark
0
Helen
Telerik team
answered on 04 Feb 2014, 07:24 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Rodrigo
Top achievements
Rank 1
answered on 04 Feb 2014, 01:07 PM
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
0
Marcelo
Top achievements
Rank 1
answered on 04 Feb 2014, 03:27 PM
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



0
Marin Bratanov
Telerik team
answered on 10 Feb 2014, 11:50 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Marcelo
Top achievements
Rank 1
answered on 10 Feb 2014, 12:36 PM
Marin,

The script fixed my problem!

Thanks,

Rodrigo
0
TD
Top achievements
Rank 1
answered on 19 Sep 2017, 12:10 PM

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.

 

0
Scott
Top achievements
Rank 1
answered on 19 Sep 2017, 09:30 PM
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.
0
Rumen
Telerik team
answered on 21 Sep 2017, 01:32 PM
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
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.
0
TD
Top achievements
Rank 1
answered on 22 Sep 2017, 07:33 AM

Hi,

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

Best Regards

 

0
TD
Top achievements
Rank 1
answered on 22 Sep 2017, 07:40 AM

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

 

 

0
Rumen
Telerik team
answered on 22 Sep 2017, 11:48 AM
Hi Thomas,

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

Best 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.
0
Rumen
Telerik team
answered on 05 Oct 2017, 01:54 PM
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
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.
Tags
Menu
Asked by
Mark Kucera
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Mark Kucera
Top achievements
Rank 1
Rodrigo
Top achievements
Rank 1
PSNTeam
Top achievements
Rank 2
Helen
Telerik team
Marcelo
Top achievements
Rank 1
Marin Bratanov
Telerik team
TD
Top achievements
Rank 1
Scott
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or