WinJS Flyout продолжает закрываться - элементы управления не могут быть нажаты

Question

Я пишу Win Universal App (JS) и внедрил Flyout. Доступ к потоку осуществляется с помощью кнопки на панели инструментов. Код для выпадающей -

<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 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> 

плавающем отображается при нажатии на кнопку и выглядит нормально, проблема в том, что элементы управления внутри выпадающей не может взаимодействовать с (раскрывающийся является заполненный через JS). Всякий раз, когда я пытаюсь щелкнуть раскрывающийся список или кнопку, всплывающее окно просто закрывается. Я попытался сделать divout div прямым ребенком тела, поскольку я видел это в другом месте как возможное решение.

Любые идеи ???

Я должен добавить, чтобы попробовать это на игровых площадках WinJS - к моему разочарованию !!

Answer 1

Вылеты должны быть прямыми детьми документа. Убедитесь, что вылет не вложен в другие div.

Answer 2

Я не знаю, была ли эта проблема такой же, как ваша, но я подумал, что прошу прокомментировать, если у кого-то еще будет такая же проблема, как у меня.

В основном это скрипку я соединили был похож на мой код: https://jsfiddle.net/reko91/yg0rs4xc/13/

Обратите внимание на CSS:

#wholeContainer { 
    position: fixed; 
} 

Как это wholeContainer был контейнер для всего, что position:fixed; вмешивался в случае щелчка на элементы в выпадающем списке. Я изменил это absolute, и он отлично работает снова :)

Обновлено скрипку: https://jsfiddle.net/reko91/yg0rs4xc/14/

Надежда, что помогает кому-то :)

Answer 3

См this answer by THETODD.

В основном проблема заключается в том, что вам необходимо определить ваши данные-win-control = "WinJS.UI.Menu" части OUTSIDE родительского фиксированного DIV. Кажется, что вы не можете позиционировать: FIXED a DIV, а затем позицию: FIXED другой внутри этого и ожидайте, что всплывающее окно будет работать во всех браузерах (работает в IE .. ha). WinJS.UI.Menu также пытается позиционировать: исправлено.

так ...

<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>