1

動的入力のために非常に長くなる可能性がある dijit.menu を使用したポップアップ サブメニューが 1 つあります。最大の高さを設定しoverflow-y:autoて dijit.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 が であり、その上では<table>機能max-heightしないことです。また、 とは異なりdijit.form.select、dijit.menu はパラメーターとして取りませんmaxHeight。

かなり前に Dojo でこの問題を説明し、修正済みとしてマークされたチケットがあることに気付きました。ただし、メニューでmaxheightを設定する方法はまだわかりません.(修正も存在しないようです)

チケット #9086 (dijit.Menu で CSS の高さを許可)

これをどのように行うことができるかについてのヒントがあれば、感謝します。

4

1 に答える 1

4

dijit.Menuご指摘のとおり、Dojo がウィジェットの DOM 作成を処理する方法に問題があります。問題は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 に答える