locked
Painting problem with flyouts

    Question

  •  I have to add a flyout into my page, based on the design below (refer html snippet). The html is hosted in an iframe, within a metro app. However, whenever the flyout is displayed after clicking the button, the flyout displays correctly for less than a second, and then results in this cropped section. Does anyone know if this a Microsoft bug, or how I should work around this?

    <div style="display:-ms-grid; -ms-grid-columns: 1fr 4fr 1fr; -ms-grid-rows: 1fr 4fr 1fr; width: 100%; height: 100%;" >
            <div style="-ms-grid-column:2; -ms-grid-row:2; position:relative" class="pagecontrol fragment">
                <header role="banner" aria-label="Header content">
                    <button class="win-backbutton" aria-label="Back" disabled></button>
                    <h1 class="titlearea win-type-ellipsis">
                        <span class="pagetitle">Welcome to TestApp2!</span>
                    </h1>
                </header>
                <section role="main" aria-label="Main content">
                    <div style="position:absolute; background-color: rgba(0, 0, 0, 0.1);  top:125px; left:125px; right:125px; bottom:0px; padding:25px;">
                        <div id="flyoutElement" ><button id="test">Show Flyout</button></div>
                        <div id="myflyout" data-win-control="WinJS.UI.Flyout" style="height:500px; max-width:800px">
                             <div >Title of flyout </div>
                             <div id="flyoutcontent"> Lots of text...</div>
                         </div>
                    </div>   
                </section>
            </div>
        </div>

    Monday, July 16, 2012 6:55 PM

Answers

  • Hi M,

    The problem is that you cannot paint outside of the owning parent (and your demo does that).  The code you have displays that flyout outside of the rendering of the HTML fragment and you cannot do that (there is no way for the container to accommodate this).  This is not unique to Metro style app development.  This is a limitation of HTML.  It is not an issue with the flyout control either.  You will notice if you replace your flyout with a div and the same positioning it will attempt to paint outside the container as well.

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, July 31, 2012 4:07 PM
    Moderator

All replies

  • Hi,

    I'm unable to reproduce this issue with your code. It would be better if you can provide your demo project on SkyDrive, the we will find the issue more conveniently and provide further suggestions for you.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Tuesday, July 17, 2012 11:18 AM
    Moderator
  • Hi,

    This seems to be a position issue. I removed the absolute/relative positions defined in your inline styles, and it started to work fine. Please do not use absolute/relative position if you want to use flyout.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, July 18, 2012 3:31 AM
    Moderator
  • Unfortunately, I need to use absolute/relative positions to anchor my controls to the bottom-left/right relative to the parent (not shown in screenshot/demo app), so that it works properly across different screen resolutions. Can't the native renderer figure out which area to paint?

    Also, the focus seems to be lost, if I used the SettingsFlyout control instead of Flyout control, the charm slides out immediately after it slides in.

    Wednesday, July 18, 2012 5:03 AM
  • Hi,

    I’m also unable to make it work with absolute position. It seems by design. I am trying to involve someone familiar with this topic to further look at this issue. There might be some time delay.

    Appreciate your patience.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Friday, July 20, 2012 9:43 AM
    Moderator
  • Hi Mallets,

    You can have the parent page display the flyout.

    Where do you want the flyout to appear?

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, July 25, 2012 7:14 PM
    Moderator
  • Thanks for the suggestions. However, this can't be by design. :(

    I really need the flyout to appear within the gray box Npx from the bottom-left of the box. The gray box can scale across different screen resolutions, as specified by the grid.  I tried moving myflyout to a sibling of <section>, it paints correctly, but appears in the wrong location 1 out of 10 times. 

    The parent page hosting the iframe would not know where the flyout or content is located, and is owned by a different company in a different country, so it will be really great if the root problem is fixed, if not solved within the html snippet above.  

    Thursday, July 26, 2012 4:29 AM
  • Hi M,

    The problem is that you cannot paint outside of the owning parent (and your demo does that).  The code you have displays that flyout outside of the rendering of the HTML fragment and you cannot do that (there is no way for the container to accommodate this).  This is not unique to Metro style app development.  This is a limitation of HTML.  It is not an issue with the flyout control either.  You will notice if you replace your flyout with a div and the same positioning it will attempt to paint outside the container as well.

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, July 31, 2012 4:07 PM
    Moderator
  • Thanks for the help.  Limitation no longer exists in Win8 RTM!

    Saturday, August 04, 2012 4:37 AM