I have a very simple app. I started with the WinJS App (Universal Windows) template in VS2015. I have a split view and inside the split view content section I have a menu. The menu appears when the control button is clicked but none of the options are selectable.
<div data-win-control="WinJS.UI.SplitView" data-win-options="{closedDisplayMode: 'overlay',panePlacement:'left'}">
<div class="win-splitview-pane">
</div>
<div class="win-splitview-content">
<button id="selectionButton">Selection</button>
<div id="selectionMenu" data-win-control="WinJS.UI.Menu">
<button data-win-options="{label:'Forward',type:'toggle'}" data-win-control="WinJS.UI.MenuCommand"></button>
<button data-win-options="{label:'Reply',type:'toggle'}" data-win-control="WinJS.UI.MenuCommand"></button>
<button data-win-options="{label:'Reply All',type:'toggle'}" data-win-control="WinJS.UI.MenuCommand"></button>
</div>
</div>
</div>
The JavaScript code for this is simple (initSelection
is called in the app.onactivated
section):
function initSelection() {
document.getElementById("selectionButton").addEventListener("click", showFlyout, false);
}
function showFlyout() {
document.getElementById("selectionMenu").winControl.show(document.getElementById("selectionButton"), "bottom", "left");
}
Is this even possible? How? thank you in advance.
Looks like you have to put the selection menu outside of the split view content section like this:
<div data-win-control="WinJS.UI.SplitView" data-win-options="{closedDisplayMode: 'overlay',panePlacement:'left'}">
<div class="win-splitview-pane">
</div>
<div class="win-splitview-content">
<button id="selectionButton">Selection</button>
</div>
</div>
<div class="win-interactive" id="selectionMenu" data-win-control="WinJS.UI.Menu">
<button class="win-interactive" data-win-options="{label:'Forward'}" data-win-control="WinJS.UI.MenuCommand"></button>
<button class="win-interactive" data-win-options="{label:'Reply'}" data-win-control="WinJS.UI.MenuCommand"></button>
<button class="win-interactive" data-win-options="{label:'Reply All'}" data-win-control="WinJS.UI.MenuCommand"></button>
</div>
This is the recommendation from the WinJS team: https://github.com/winjs/winjs/issues/1553#issuecomment-159416488
Once you do this it'll work.