locked
Navigation template breaks position of flyout sometimes

    General discussion

  • Hi there,

    I built a small app from Navigation template. The problem is that the flyout pops out on the top left corner sometimes if you click on the app bar command repeatedly. It is not reproducible with Blank template though.

    BTW, I'm running it on Windows RC (build: 8400).

    Here is code snippet for your reference:

    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to App3!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
                    <div id="uploadFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Format text flyout}">
                <h4 data-win-res="{textContent: 'uploadCaption'}"></h4>
                <textarea class="UploadMessage"></textarea>
                <div class="placeholder"></div>
                <p>
                    <input type="checkbox" checked class="classCheckbox" />
                    <label data-win-res="{textContent: 'checkMe'}"></label>
                </p>
                <div style="width: 100%;">
                    <button style="float: right" class="flyoutUploadButton" data-win-res="{textContent: 'upload'}"></button>
                </div>

            </div>
            <div class="appbar" data-win-control="WinJS.UI.AppBar">
                <button data-win-control="WinJS.UI.AppBarCommand" data-win-res="{winControl: { 'label' : 'upload' }}" data-win-options="{id:'uploadButton', icon:'upload',type:'flyout',flyout:'uploadFlyout'}"></button>
            </div>
        </div>
    </body>

    • Changed type Dino He Thursday, August 09, 2012 1:16 AM
    Wednesday, August 01, 2012 8:35 AM

All replies

  • I use this code repro your question:

    <body>
         <!-- The content that will be loaded and displayed. -->
         <div class="fragment homepage">
             <header aria-label="Header content" role="banner">
                 <button class="win-backbutton" aria-label="Back" disabled></button>
                 <h1 class="titlearea win-type-ellipsis">
                     <span class="pagetitle">Welcome to App3!</span>
                 </h1>
             </header>
             <section aria-label="Main content" role="main">
                 <p>Content goes here.</p>
             </section>
                     <div id="uploadFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Format text flyout}">
                 
                 <textarea class="UploadMessage"></textarea>
                 <div class="placeholder"></div>
                 <p>
                     <input type="checkbox" checked class="classCheckbox" />
                     <label >aaa</label>
                 </p>
                 <div style="width: 100%;">
                     <button style="float: right" class="flyoutUploadButton" >upload</button>
                 </div>
     
            </div>
             <div class="appbar" data-win-control="WinJS.UI.AppBar">
                 <button data-win-control="WinJS.UI.AppBarCommand" data-win-res="{winControl: { 'label' : 'upload' }}" data-win-options="{id:'uploadButton', icon:'upload',type:'flyout',flyout:'uploadFlyout'}"></button>
             </div>
         </div>
     </body>
    Hope some MSFT will see this.

    • Edited by KMoon Friday, August 03, 2012 10:20 AM
    Friday, August 03, 2012 10:18 AM
  • I can get the flyout to appear in the correct place every time. Is there a trick to getting this to happen?

    Are you running in the simulator?

    -Jeff


    Jeff Sanders (MSFT)


    Friday, August 03, 2012 6:38 PM
    Moderator
  • No, not in the simulator. I can reproduce it on a variety of displays, ranging from 17-inch LCD, 13-inch Laptop, to 10-inch slate.

    You can try to click on the command bar button repeatedly and might get one reproducing every 5 to 10 times.

    Many thanks!

    -Claus Lin

    Monday, August 06, 2012 3:03 AM
  • Hi

    I find you need to click the commands quickly and this will pop-up on the top left .

    Monday, August 06, 2012 3:07 AM
  • @Dino: Yep. It's exactly what it looks like. I tried different alignments, placements, and anchors but none would get to work.
    Tuesday, August 07, 2012 2:33 AM
  • Hi

    I had report this wired behavior to dev team.

    Thanks for your valuable feedback!

    Dino

    Tuesday, August 07, 2012 6:19 AM
  • Hey, I have fixed a similar problem by moving the Flyout <div> to the bottom of the page, right before the <body> tag. My hypothesis is that Flyout does not work correctly if it is nested somewhere, just like the other Templates. So try to moving your <div id="uploadFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Format text flyout}">. It worked for me! 
    Wednesday, August 08, 2012 6:42 AM
  • HI

    Actually the problem can not repro in my laptop, but still exsit in my working machine, they all have same build win8 and same vs version , 64bit platform.

    So I will change this thread type, and the dev team will handle this issue.

    Thanks


    • Edited by Dino He Thursday, August 09, 2012 1:16 AM
    Thursday, August 09, 2012 1:16 AM