locked
Possible to put a ListView inside of a FlipView?

    Question

  • It seems like when you put a ListView inside of a FlipView you lose all scrolling capabilities. Is this a known bug?

    I even took my ListView outside the FlipView, scrolls nice. Put inside, no scrolling.

    Can anyone else repro?

    Here's screenshot from the DOM Explorer:



    FINAL FIX:

    Add "-ms-overflow-style:auto;" as a style to your divs to make scrollbars show up in children of a FlipView. Jeff I think is going to try to find out why the FlipView hides scrollbars of child elements...but don't quote me on that :)

    • Edited by Harlequin Monday, February 06, 2012 9:26 PM Final fix...
    Wednesday, February 01, 2012 6:33 PM

All replies

  • Update. I tried to repro it again using a Flex Box, didn't work. Then I tried just a simple div with overflow:scroll.

    DIV OUTSIDE THE FLIP VIEW(notice the scrollbar)

     

    SAME DIV INSIDE THE FLIP VIEW

    Notice the scrollbars are missing. Now I can still scroll with the wheel, but it looks like things that scroll(ListView/Flex Box/Div w/ scroll) don't work inside of FlipViews.

    Now I'm stuck as to an alternative.

    Wednesday, February 01, 2012 10:38 PM
  • I'll ask then...is there anything other than a FlipView anyone can recommend? Since scrollbars in subcontrols don't render in the control #sadpanda
    Friday, February 03, 2012 4:19 PM
  • Okay, this is weird. I had an error in my javascript(I ended a line with : instead of ;)...so the JavaScript died. THEN I could see scrollbars on the div in the FlipView. Fixed JavaScript error, scrollbars gone.

    I then cleared out all items in my "WinJS.UI.processAll" so nothing is in it, no scrollbars still.

    Wondering where the conflict is to make these scrollbars disappear. #confusion

    Friday, February 03, 2012 6:54 PM
  • I think what you may be hitting is related to the hit testing of the flip view.  You could futz with that!  See this thread:

    http://social.msdn.microsoft.com/Forums/en/winappswithhtml5/thread/a837d597-1cbe-41e8-9bff-dc5cc54bd266

    -Jeff


    Jeff Sanders (MSFT)
    Friday, February 03, 2012 7:48 PM
    Moderator
  • I'll check that link out. Odd thing is that there is a scrollbar(and it's scrollable) while the FlipView is in transition, once transition is complete the scrollbars of stuff inside disappear.
    Friday, February 03, 2012 8:13 PM
  • I changed the background colour of my flipview, inside divs, inside scroll divs all to white.

    By that link I can guess that if you want something to scroll it needs a background color. Silverlight is the same way, but in Silverlight you can have transparent and it works, by the conversation in that link transparent doesn't do that in HTML5 Metro apps.

    Again I made my bg's white, no scrollbar.

    Note again that in a few posts above I mentioned that when my JavaScript had an error in it, the scrollbars showed up. So it almost feels like there is a bug in the root WinJS JavaScript files that make the scrollbars disappear in a scrollable div, when it's in a FlipView. My broken JavaScript stopped some root JavaScript from doing something. Just a feeling :)

    Friday, February 03, 2012 8:23 PM
  • Ah... great hint!  Yes if there is an error it could stop processing and that would prevent the correct behavior.

    Uncomment this line in your JS files (or add it).

    Debug.enableFirstChanceException(true);
    
    

    And lets see if we can't track down what the issue is.

    -Jeff


    Jeff Sanders (MSFT)
    Friday, February 03, 2012 8:37 PM
    Moderator
  • I have that turned on all the time. I don't think it's an "error" per se in the WinJS, as my code never hit one. I think there is something in the FlipView code/something that turns off overflows for itself, and it does the same for it's children.

    I don't want to assume that you're on the actual team that's building this beast, so if there's a Microsoft Connect site to put this as a bug too that would be handy :)

    Friday, February 03, 2012 9:01 PM
  • Can you share a repro of this with me?  Go to my blog:  http://blogs.msdn.com/jpsanders and choose contact on the right side to send me an email.

    -Jeff


    Jeff Sanders (MSFT)
    Friday, February 03, 2012 9:17 PM
    Moderator