How to float Dojo DropDownMenu over a table cell

Question

In short, how can I show a drop down menu floating over a table and not rendered inside the table cell?

I am using this example code to show a drop down menu inside a table cell:

window.someObj.showSocs = function(index){
  var pSubMenu = new DropDownMenu({});
  pSubMenu.addChild(new MenuItem({
    label: "Cut",
    iconClass: "dijitEditorIcon dijitEditorIconCut"
  }));
  pSubMenu.addChild(new MenuItem({
    label: "Copy",
    iconClass: "dijitEditorIcon dijitEditorIconCopy"
  }));
  pSubMenu.addChild(new MenuItem({
    label: "Paste",
    iconClass: "dijitEditorIcon dijitEditorIconPaste"
  }));

  pSubMenu.placeAt("socs-" + index.toString());
  pSubMenu.startup();
}

where DropDownMenu is "dijit/DropDownMenu" and MenuItem is "dijit/MenuItem".

Then I am using this code to add a link to a table cell (it's executed inside a dgrid renderCell function but I believe it is not relevant for this problem):

var link = document.createElement("a");
var linkText = "javascript:someObj.showSocs(" + index + ")";
link.setAttribute("href", linkText);
link.innerHTML = "DropNew";
td.appendChild(link);
td.setAttribute("id", "socs-" + index.toString());

Now when I click the link the dropdown is being rendered but inside the table cell, not over it. This causes the current table row to expand. I guess it's down to some CSS properties that I can't figure out. I am not overriding any CSS properties so I would expect the dropdown to be placed over the table instead of inside a cell automatically?

score 3 · Accepted Answer · answered Nov 21 '12 at 14:49

You place menu's DOM node into the cell, so it stretches the cell. You can place the menu into <body> and position it absolutely with the help of dijit/place around the required node.

I would use built-in functionality for context menus, e.g.:

// var Menu = require("dijit/Menu");
var menu = new Menu({
    leftClickToOpen: true,
    targetNodeIds: ["table1"],
    selector: "a.dropNew"
});

See it in action: http://jsfiddle.net/phusick/TBWXL/

enter image description here

How to float Dojo DropDownMenu over a table cell

1 Answers1