CODEWITHSUNDEEP
javascriptcssdojo
Mark Ni
Mark Ni

Reputation: 2401

Set max height on dijit.Menu

I have one popup subMenu using dijit.menu that can be very long due to dynamic input. I want to set a max Height and overflow-y:auto to dijit.menu. So it will has a scroll bar when becoming too long.

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}));

The problem is the top level of dijit.menu is a <table>, and max-height won't work on it. Also, unlike dijit.form.select, the dijit.menu does not take maxHeight as a parameter.

I noticed there is a ticket describing this problem on dojo long time ago and marked as fixed. However, I still have no idea how to set maxheight on the menu.(The fix seems no longer exsits too)

Ticket #9086 (Allow CSS height on dijit.Menu)

Any hint on how I might able to do this would be apperciated.

Upvotes: 1

Views: 1221

Answers (1)

Default
Default

Reputation: 16488

As you noted, there is an issue with the way that Dojo handles the DOM creation of the dijit.Menu widget. The problem isn't that maxHeight isn't accepted as a parameter (as you can just pass it into the widget's style property as part of an Object or String), rather how the styling is applied.

You mentioned that the "top level" of a Menu widget is the <table> node. However, this is not the whole truth. That node is what Dojo presents to the client (you) as the "top level" domNode, but the Menu actually wrapped in another <div> that you cannot access directly from the widget, and it is this node that your styles should be applied to.

This <div> has the attribute class="dijitPopup dijitMenuPopup", but I doubt you want to set your styles to Dijit popups/menus globally. To avoid this, you can set the baseClass property on your widget as follows:

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

This will change that top level <div> attribute to read class="dijitPopup myCustomMenuPopup". This gives you a class that you can modify with the CSS styles you need to accomplish your goal:

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

Here is a working example in jsfiddle.

Upvotes: 4

Related Questions