WinJS Flyout continue de se fermer - les contrôles ne peuvent pas être cliqués

Question

J'écris une application Win Universal (JS) et j'ai mis en place un Flyout. Le Flyout est accessible via un bouton dans une barre d'outils. Code de l'icône déroulante -

<button data-win-control="WinJS.UI.Command" data-win-options="{ 
     id:'cmdChangeCategory', 
     label:'Change Category', 
     section:'selection', 
     type:'flyout', 
     icon:'video', 
     tooltip:'Change Category', 
     flyout:'changeCatFlyout'}"></button> 

Flyout div -

<div id="changeCatFlyout" data-win-control="WinJS.UI.Flyout"> 
    <label for="ddlChangeCategory" style="display:block;clear:both;margin-top:10px">Select Category</label> 
    <select id="ddlCategoryChange"></select> 
    <button id="btnChangeCategory" title="Change" style="display:block;clear:both;margin-top:10px">Change</button> 
</div> 

Les affichages Flyout lorsque clique sur le bouton et regarde bien, le problème est que les contrôles à l'intérieur l'icône déroulante ne peuvent pas être en interaction avec (le menu déroulant est peuplé par JS). Chaque fois que j'essaie de cliquer sur la liste déroulante ou sur le bouton, le menu déroulant se ferme simplement. J'ai essayé de faire de la div flyout un enfant direct du corps comme je l'ai vu ailleurs comme une solution possible.

Des idées ???

Je devrais ajouter essayer ceci dans les travaux de WinJS Playground - à ma frustration!

Answer 1

Les flyouts doivent être des enfants directs de document.body. Assurez-vous que la sortie n'est pas imbriquée dans d'autres divs.

Answer 2

Je ne sais pas si c'est le même problème que le vôtre mais j'ai pensé que je commenterais au cas où quelqu'un d'autre aurait le même problème que moi.

Fondamentalement, ce violon, je l'ai mis en place était semblable à mon code: https://jsfiddle.net/reko91/yg0rs4xc/13/

Avis css:

#wholeContainer { 
    position: fixed; 
} 

Comme ce wholeContainer était le récipient pour tout le position:fixed; interférait avec l'événement, cliquez sur les éléments dans le flyout. J'ai changé cela absolute, et il fonctionne parfaitement à nouveau :)

violon Mise à jour: https://jsfiddle.net/reko91/yg0rs4xc/14/

espoir qui aide une personne :)

Answer 3

Voir this answer by THETODD. Fondamentalement, le problème est que vous devez définir votre data-win-control = "WinJS.UI.Menu" parties à l'extérieur du DIV fixe parentale. Il semble que vous ne pouvez pas positionner: FIXED un DIV et ensuite positionner: FIXE un autre à l'intérieur de cela et s'attendre à ce que le flyout fonctionne sur tous les navigateurs (fonctionne dans IE .. ha). Le WinJS.UI.Menu tente également de positionner: fixed.

so ...

<div id="aMenuBar" style="position:fixed"> 
    <button id="settingsButton" class="win-button">Settings</button> 
</div> 

<!-- this part cannot be in the fixed div above --> 
<div id="settingsFlyout" data-win-control="WinJS.UI.Menu"> 
    <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:alwaysSaveMenuItem',label:'Always Save Drafts',type:'toggle',selected:'true'}"></button> 
</div>