1

我有一个使用 dijit.menu 的弹出子菜单，由于动态输入，它可能会很长。我想设置一个最大高度和overflow-y:autodijit.menu。所以当它变得太长时它会有一个滚动条。

var subMenu  = new dijit.Menu({ parentMenu: this.mainMenu});

//....add a lots of submenu items here

this.mainMenu.addChild(new dijit.PopupMenuItem({label: "some label", popup: subMenu}));

问题是 dijit.menu 的顶层是 a <table>，并且max-height无法处理它。此外，与 不同dijit.form.select的是，dijit.menu 不maxHeight作为参数。

我注意到很久以前在dojo上有一张描述这个问题的票，并标记为已修复。但是，我仍然不知道如何在菜单上设置 maxheight。（修复似乎不再存在）

票证 #9086（在 dijit.Menu 上允许 CSS 高度）

任何关于我如何能够做到这一点的提示都会受到重视。

4

1 回答 1

4

正如您所指出的，Dojo 处理小部件的 DOM 创建的方式存在问题dijit.Menu。问题不在于maxHeight不被接受为参数（因为您可以将其style作为对象或字符串的一部分传递到小部件的属性中），而是如何应用样式。

Menu您提到小部件的“顶级”是<table>节点。然而，这并不是全部真相。该节点是 Dojo 作为“顶级”呈现给客户端（您）的domNode，但Menu实际上包装在另一个<div>您无法直接从小部件访问的节点中，并且您的样式应该应用于此节点。

这<div>具有属性class="dijitPopup dijitMenuPopup"，但我怀疑您是否要将样式设置为全局 Dijit 弹出窗口/菜单。为避免这种情况，您可以baseClass在小部件上设置属性，如下所示：

new Menu({
    baseClass: "myCustomMenu",
    targetNodeIds: ["myTarget"]
});

这会将顶级<div>属性更改为 read class="dijitPopup myCustomMenuPopup"。这为您提供了一个类，您可以使用实现目标所需的 CSS 样式对其进行修改：

.myCustomMenuPopup {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

这是 jsfiddle 中的一个工作示例。

于 2013-04-15T21:08:26.623 回答