Home/ Questions/Q 8866873
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T16:53:25+00:00

In short, how can I show a drop down menu floating over a table

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0