Context Menu is not aware of window borders

[Oleg]

Hello Cagatay,

There is an issue with ContextMenu which makes me headache. ContextMenu in my "old" Struts web app was draggable (don't matter here) and aware of window borders. That means, when user clicks on any row close to browser border and menu's content doesn't fit to visible area, the menu was adjusted in its position in order to get visible! This is a behavior of browser native context menu too. Click somewhere with the right mouse key close to the browser border please and you will see what I mean. PrimeFaces' ContextMenu looks in this case like these screenshots.




Can I create an issue ticket?

BTW, fix is very easy. I can even post the fix here in pure JS without jQuery if you want.

[Oleg]

Here the fix I implemented a couple of years ago:

Code: Select all

function adjustMenuPlace()
{
    var adjust = false;
    var menuObject = getDivContent();  // get DIV element of context menu. Please adjust this is PrimeFaces.
    var isIE = ((document.all) && (window.offscreenBuffering)) ? true : false;
	
    // find out how close the mouse is to the corner of the window
    var rightedge  = (isIE ? document.body.clientWidth  : window.innerWidth) - curMouseX;
    var bottomedge = (isIE ? document.body.clientHeight : window.innerHeight) - curMouseY;
    var scrollX = isIE ? document.body.scrollLeft : window.pageXOffset;
    var scrollY = isIE ? document.body.scrollTop : window.pageYOffset;
    var menuLeft = null;
    var menuTop = null;

    // if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge < menuObject.offsetWidth) {
        //move the horizontal position of the menu to the left by it's width
        menuLeft = scrollX + curMouseX - menuObject.offsetWidth - 2;
        adjust = true;
    }

    // same concept with the vertical position
    if (bottomedge < menuObject.offsetHeight) {
        menuTop = scrollY + curMouseY - menuObject.offsetHeight - 2;
        adjust = true;
    }

    if (adjust == true) {
        if (menuTop < scrollY)
            menuTop = scrollY + 2;
        if (menuLeft != null)
            menuObject.style.left = menuLeft + 'px';
        if (menuTop != null)
            menuObject.style.top  = menuTop + 'px';
    }
}

Call this method before you show context menu please. You can rewrite, adjust this method, etc. I just wanted to provide an idea. I'm sure you can achieve that even easier with jQuery.

Many thanks for your effort.

[Oleg]

I've created an issue ticket http://code.google.com/p/primefaces/iss ... il?id=2441 Please look into this issue if you have time. Many thanks!

[cagatay.civici]

Best place is to enhance the ContextMenu's using function which is used to calculate the position of the menu.

Current impl is;

Code: Select all

    this.cfg.position = {
            my: 'left top'
            ,using: function(to) {
                $(this).css({
                    top: PrimeFaces.widget.ContextMenu.pageY,
                    left: PrimeFaces.widget.ContextMenu.pageX
                });
            }
        }

[Oleg]

Okey. I didn't look into JS widget until now. This function is a good place then for any menu adjustments. If you replace "curMouseX" / "curMouseY" in my code above by your "top" / "left", the adjustment should work like a charm. Also IE test can be done by jQuery.browser. I'm sure you can rewrite the code above for jQuery. I use this logic a couple of years in a real business web app. It was tested in all significant browsers - IE7-IE9, Firefox, Chrome, Safari.

[cagatay.civici]

I'll look into it for sure after M3 is out. Right now we only work on showstoppers

[Oleg]

This is a good news Cagatay. Good luck then with showstoppers!

[Robbe64]

I know it's an old thread, but the problem still exists with submenus in contextmenus.
Does anyone know a workaround?