CODEWITHSUNDEEP
menudojodialogpopup
Paul Angelno
Paul Angelno

Reputation: 481

Is there a way to get a Dojo Dialog to popup from a PopupMenuItem to the left?

I'm using Dojo version 1.6.1. I'm building a menu that has a Dialog dijit as a popup from a PopupMenuItem. This works, however, if the menu is docked on the right-hand side of the application I need the popup to display to the left of the menu. I can't seem to get this to work. If I use another type of widget (like a ColorPalette), this works fine. With popup submenus and a popup ColorPalette, everything opens to the left if the menu is on the right-hand side of the screen, and everything opens to the right if the menu is on the left-hand side of the screen. Dojo just handles this automatically. But with any Dialog widget, even an empty one, it always pops out to the right of the PopupMenuItem regardless of where the menu is on the screen. I thought that perhaps specifying height and width of the div that is the dijit.Dialog would resolve this, but it did not.

Here's a simplified version of the code:

<div data-dojo-type="dijit.Menu" id="toolPalette" style="position:absolute; right:0; top:0; z-index: 999;">
</div>

<script>
    // Grab the div for the menu, declared in the HTML above.
    var toolPalette = dijit.byId("toolPalette");

    // This tool button has a popup
    var menuItem1 = new dijit.PopupMenuItem({
        id: "menuItem1",
        iconClass: "shelterIcon",
        popup: new dijit.Dialog()
    });
    toolPalette.addChild(menuItem1);

    // This tool button does not have a popup
    var menuItem2 = new dijit.MenuItem({
        id: "menuItem2",
        iconClass: "shelterIcon"
    });
    toolPalette.addChild(menuItem2);

    toolPalette.startup();
</script>

Any help is greatly appreciated! I've tried everything I can think of.

Upvotes: 2

Views: 1765

Answers (1)

BOSS
BOSS

Reputation: 2951

Way to find your current Cursor location

document.onmouseup = getXY;
var mouseX, mouseY;

function getXY(e) {
    mouseX= (e || event).clientX;
    mouseY= (e || event).clientY;
    if (document.documentElement.scrollTop > 0) {
        mouseY= mouseY+ document.documentElement.scrollTop;
    }
}

Your Code here .

 var myDialog = new dijit.Dialog();
 var menuItem1 = new dijit.PopupMenuItem({
        id: "menuItem1",
        iconClass: "shelterIcon",
        popup: myDialog 
    });

Now apply the X and Y to your Dialog.

dijit.popup.open({
    x: mouseX,
    y : mouseY,
    popup: myDialog 
 });

Upvotes: 1

Related Questions