Dev Center - Windows Store apps >
> 
> 
Navigation template breaks position of flyout sometimes

Discussion Navigation template breaks position of flyout sometimes

  • Wednesday, August 01, 2012 8:35 AM
     
      Has Code
    Sign In to Vote
    0

    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>

     

All Replies

  • Friday, August 03, 2012 10:18 AM
     
      Has Code
    Sign In to Vote
    0

    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 6:38 PM
    Moderator
     
     
    Sign In to Vote
    0

    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)


     
  • Monday, August 06, 2012 3:03 AM
     
     
    Sign In to Vote
    0

    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:07 AM
    Moderator
     
     
    Sign In to Vote
    1

    Hi

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

     
  • Tuesday, August 07, 2012 2:33 AM
     
     
    Sign In to Vote
    0
    @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 6:19 AM
    Moderator
     
     
    Sign In to Vote
    0

    Hi

    I had report this wired behavior to dev team.

    Thanks for your valuable feedback!

    Dino

     
  • Wednesday, August 08, 2012 6:42 AM
     
     
    Sign In to Vote
    0
    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! 
     
  • Thursday, August 09, 2012 1:16 AM
    Moderator
     
     
    Sign In to Vote
    1

    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