Positioning the contents of a dojo dijit.form.DropDownButton?

Question

I have this jsfiddle where I have three buttons on the top right.

The content of the two buttons which are all the way to the right, "Basemaps" and "Legend", open toward the left as expected so they do not go out of the browser window. The content of the left button, "Map Overlays", opens to toward the right because there is room for it to do so.

Is it possible to change the content of these DropDownButtons so that by default they all position themselves with the right side of the content aligned with the right side of the button?

IE, I would like for the opened contents of left button ("Map Overlays") to position itself the same way as the opened contents of the other buttons do.

Answer 1

Fixed jsfiddle with desired functionality.

I've fixed this by adding a dojo.connect for the onMouseDown event of the DropDownButton. I calculate the new x-position for the ContentPane from the DropDownButton's x-position and width. Then I find the parent node node of the ContentPane's DOM node and set its left style parameter to that new x-position.

dojo.connect(dijit.byId("mapOverlayDropdown"), 'onMouseDown', function() {
    console.log("shown");

    var button = dijit.byId("mapOverlayDropdown").domNode;
    var gallery = dijit.byId("mapOverlayGallery").domNode.parentNode;

    var buttonPos = dojo.position(button, true);
    var galleryPos = dojo.position(gallery, true);

    var newX = buttonPos.x + buttonPos.w - galleryPos.w;

    gallery.style.left = newX.toString() + "px";
});