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?
1 answers
solution1
3 ACCPTED 2012-11-21 14:49:02
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, eg:
// 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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.