locked
FlipView layout bug when changing its size

    Question

  • Hi all,

    I have a div with two -ms-grid columns: "320px 1fr".

    The first column contains a WinJS.UI.ListView with articles in it and the second column contains a WinJS.UI.FlipView which displays the currently selected article. Everything works just fine.

    I have a button to toggle the ListView visibility, when the user taps on it, I change the -ms-grid configuration to "auto 1fr", give a style.opacity = "0" to the ListView and perform a forceLayout() on the FlipView, again everything's fine.
    But when I toggle back to "320px 1fr" (style.opacity = "1" on the ListView + refresh the ListView by setting its itemDataSource + forceLayout() on the FlipView), the layout of the current article of the FlipView is missing ~100px on the ListView's side, the missing elements appear when you click on it but the global layout stays broken until you select another article (another FlipView page) and this particular page layout stays broken if you get back on it except if you switched enough pages to make the FlipView recycle it.

    Here is a visual example of the bug:

    Am I doing something wrong?

    Thanks to anyone who could help!

    Pierre

    Tuesday, April 02, 2013 10:47 AM

All replies

  • Hi Pierre,

    Can you post a simple repro of this issue?  Perhaps on SkyDrive.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, April 04, 2013 6:52 PM
    Moderator
  • Hi Jeff,

    Thank you for your answer, unfortunately, I've tried to repro this in a simple app but couldn't ...

    My code is quite complicated so it can come from anywhere ... :(

    I could share my code with you in private if you have some time to look at it, just tell me your email address.

    PS: I've found a workaround but it's really dirty, right after the call to forceLayout(), I do:

    msSetImmediate(function () {
    	// root div of each FlipView page
    	var articleRoots = document.querySelectorAll('.articleItemTemplate');
    	for (var i = 0; i < articleRoots.length; i++) {
    		articleRoots[i].style.opacity = '0.99';
    	}
    	setTimeout(function () {
    		// root div of each FlipView page
    		var articleRoots = document.querySelectorAll('.articleItemTemplate');
    		for (var i = 0; i < articleRoots.length; i++) {
    			articleRoots[i].style.opacity = '1';
    		}
    	}, 1);
    });

    It forces a redraw of each page but it's not perfect, the white part of the page (in my screenshot above) causes a white flash: it disappears and reappears very quickly.

    That code only forces the redraw of the page so I really think it's an internal bug of the FlipView which don't redraw the page to the good size before the app shows the result of the user's action... Don't you think?

    Regards,

    Pierre


    Friday, April 05, 2013 7:53 AM